diff --git a/ui/component/viewers/imageViewer.jsx b/ui/component/viewers/imageViewer.jsx
index 7c61c5448..e83e878b1 100644
--- a/ui/component/viewers/imageViewer.jsx
+++ b/ui/component/viewers/imageViewer.jsx
@@ -1,5 +1,7 @@
 // @flow
 import React from 'react';
+import Card from 'component/common/card';
+import ErrorText from 'component/common/error-text';
 
 type Props = {
   source: string,
@@ -7,10 +9,23 @@ type Props = {
 
 function ImageViewer(props: Props) {
   const { source } = props;
+  const [loadingError, setLoadingError] = React.useState(false);
+
   return (
-    <div className="file-render__viewer">
-      <img src={source} />
-    </div>
+    <React.Fragment>
+      {loadingError && (
+        <Card
+          title={__('Error Displaying Image')}
+          defaultExpand
+          actions={<ErrorText>There was an error displaying the image. You may still download it.</ErrorText>}
+        />
+      )}
+      {!loadingError && (
+        <div className="file-render__viewer">
+          <img src={source} onError={() => setLoadingError(true)} />
+        </div>
+      )}
+    </React.Fragment>
   );
 }