#155 - Fallback image

CHANGELOG.md

@@ -7,6 +7,7 @@
 - [#151](https://github.com/estruyf/vscode-front-matter/issues/151): Detect which site-generator or framework is used
 - [#152](https://github.com/estruyf/vscode-front-matter/issues/152): Automatically set setting based on the used site-generator or framework
 - [#154](https://github.com/estruyf/vscode-front-matter/issues/154): Bulk script support added
+- [#155](https://github.com/estruyf/vscode-front-matter/issues/155): Fallback image added for the images shown in the editor panel
 
 ### 🐞 Fixes
 

src/panelWebView/components/Fields/ImageFallback.tsx

@@ -0,0 +1,38 @@
+import { XCircleIcon } from '@heroicons/react/solid';
+import * as React from 'react';
+
+export interface IImageFallbackProps {
+  src: string;
+}
+
+export const ImageFallback: React.FunctionComponent<IImageFallbackProps> = ({ src }: React.PropsWithChildren<IImageFallbackProps>) => {
+
+  if (!src) {
+    return (
+      <div style={{
+        width: '100%',
+        height: '120px',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'var(--button-secondary-hover-background)'
+      }}>
+        <XCircleIcon style={{
+          height: '8rem',
+          width: '8rem',
+          color: 'var(--vscode-errorForeground)',
+        }} />
+
+        <p style={{
+          marginBottom: '1rem',
+          color: 'var(--button-secondary-foreground)',
+        }}>The image couldn't be loaded</p>
+      </div>
+    );
+  }
+
+  return (
+    <img src={src} />
+  );
+};

src/panelWebView/components/Fields/PreviewImage.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { ImageFallback } from './ImageFallback';
 import { PreviewImageValue } from './PreviewImageField';
 
 export interface IPreviewImageProps {
@@ -7,9 +8,11 @@ export interface IPreviewImageProps {
 }
 
 export const PreviewImage: React.FunctionComponent<IPreviewImageProps> = ({ value, onRemove }: React.PropsWithChildren<IPreviewImageProps>) => {
+  console.log(value);
+
   return (
     <div className={`metadata_field__preview_image__preview`}>
-      <img src={value.webviewUrl} />
+      <ImageFallback src={value.webviewUrl} />
 
       <button type="button" onClick={() => onRemove(value.original)} className={`metadata_field__preview_image__remove`}>Remove image</button>
     </div>