From 1d9f07b86d91af824f41afadd7f4766778cf464d Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Mon, 18 Oct 2021 14:29:54 +0200
Subject: [PATCH] #155 - Fallback image

---
 CHANGELOG.md                                  |  1 +
 .../components/Fields/ImageFallback.tsx       | 38 +++++++++++++++++++
 .../components/Fields/PreviewImage.tsx        |  5 ++-
 3 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 src/panelWebView/components/Fields/ImageFallback.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 56be5a81..af9754dd 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/src/panelWebView/components/Fields/ImageFallback.tsx b/src/panelWebView/components/Fields/ImageFallback.tsx
new file mode 100644
index 00000000..83f45bff
--- /dev/null
+++ b/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} />
+  );
+};
\ No newline at end of file
diff --git a/src/panelWebView/components/Fields/PreviewImage.tsx b/src/panelWebView/components/Fields/PreviewImage.tsx
index d564fb4e..9e7f8912 100644
--- a/src/panelWebView/components/Fields/PreviewImage.tsx
+++ b/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>