From 8f2ab3f26954fe684c9f7cefa1f95183aefa74aa Mon Sep 17 00:00:00 2001
From: Muhsin Shah C P <muhsinshah21@gmail.com>
Date: Mon, 31 Jan 2022 14:10:17 +0530
Subject: [PATCH] Added background color property for image widget(#2022)

---
 frontend/src/Editor/Components/Image.jsx     | 3 ++-
 frontend/src/Editor/Components/components.js | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/Editor/Components/Image.jsx b/frontend/src/Editor/Components/Image.jsx
index a9819c75c0..e6fbb82186 100644
--- a/frontend/src/Editor/Components/Image.jsx
+++ b/frontend/src/Editor/Components/Image.jsx
@@ -3,7 +3,7 @@ import LazyLoad from 'react-lazyload';
 
 export const Image = function Image({ height, properties, styles, fireEvent }) {
   const { source } = properties;
-  const { visibility, disabledState, borderType } = styles;
+  const { visibility, disabledState, borderType, backgroundColor } = styles;
   const widgetVisibility = visibility ?? true;
   const imageRef = useRef(null);
   const [imageOffset, setImageOffset] = useState(0);
@@ -37,6 +37,7 @@ export const Image = function Image({ height, properties, styles, fireEvent }) {
           <img
             src={source}
             className={`${borderType !== 'none' ? borderType : ''}`}
+            style={{ backgroundColor }}
             height={height}
             onClick={() => fireEvent('onClick')}
           />
diff --git a/frontend/src/Editor/Components/components.js b/frontend/src/Editor/Components/components.js
index d481247f83..ea45354ddb 100644
--- a/frontend/src/Editor/Components/components.js
+++ b/frontend/src/Editor/Components/components.js
@@ -797,6 +797,7 @@ export const componentTypes = [
           { name: 'Thumbnail', value: 'img-thumbnail' },
         ],
       },
+      backgroundColor: { type: 'color', displayName: 'Background color' },
       visibility: { type: 'code', displayName: 'Visibility' },
       disabledState: { type: 'code', displayName: 'Disable' },
     },