[CLNP-2332] Not to load image if url is empty or null in ImageRenderer (#986)

Fixes:
[SBISSUE-15134](https://sendbird.atlassian.net/browse/SBISSUE-15134)

### Changelogs
- Fixed `ImageRenderer` not to load image if the source URL is null or
empty.

[SBISSUE-15134]:
https://sendbird.atlassian.net/browse/SBISSUE-15134?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: chrisallo

package.json

@@ -67,7 +67,7 @@
     "react-dom": "^16.8.6 || ^17.0.0 || ^18.0.0"
   },
   "dependencies": {
-    "@sendbird/chat": "^4.10.9",
+    "@sendbird/chat": "^4.10.10",
     "@sendbird/uikit-tools": "0.0.1-alpha.62",
     "css-vars-ponyfill": "^2.3.2",
     "date-fns": "^2.16.1",

src/ui/Avatar/__tests__/__snapshots__/Avatar.spec.js.snap

@@ -59,12 +59,7 @@ exports[`ui/Avatar should do a snapshot test of the Avatar DOM with four element
       >
         <div
           class="sendbird-image-renderer__image"
-          style="width: 100%; min-width: min(400px, 56px); max-width: 400px; position: absolute; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url();"
-        />
-        <img
-          alt=""
-          class="sendbird-image-renderer__hidden-image-loader"
-          src=""
+          style="width: 100%; min-width: min(400px, 56px); max-width: 400px; position: absolute;"
         />
       </div>
     </div>
@@ -218,12 +213,7 @@ exports[`ui/Avatar should render default image if src is empty 1`] = `
     >
       <div
         class="sendbird-image-renderer__image"
-        style="width: 100%; min-width: min(400px, 56px); max-width: 400px; position: absolute; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url();"
-      />
-      <img
-        alt=""
-        class="sendbird-image-renderer__hidden-image-loader"
-        src=""
+        style="width: 100%; min-width: min(400px, 56px); max-width: 400px; position: absolute;"
       />
     </div>
   </div>

src/ui/ImageRenderer/index.tsx

@@ -98,6 +98,13 @@ const ImageRenderer = ({
   };
 
   const renderImage = () => {
+    const backgroundStyle = internalUrl ? {
+      backgroundRepeat: 'no-repeat',
+      backgroundPosition: 'center',
+      backgroundSize: 'cover',
+      backgroundImage: `url(${internalUrl})`,
+    } : {};
+
     return (
       <div
         className="sendbird-image-renderer__image"
@@ -107,11 +114,8 @@ const ImageRenderer = ({
           maxWidth: fixedSize ? dynamicMinWidth : '400px',
           height: dynamicMinHeight,
           position: 'absolute',
-          backgroundRepeat: 'no-repeat',
-          backgroundPosition: 'center',
-          backgroundSize: 'cover',
-          backgroundImage: `url(${internalUrl})`,
           borderRadius: getBorderRadiusForImageRenderer(circle, borderRadius),
+          ...backgroundStyle,
         }}
       />
     );
@@ -141,7 +145,7 @@ const ImageRenderer = ({
             }}
           />
         )}
-        <HiddenImageLoader
+        {internalUrl && <HiddenImageLoader
           src={internalUrl}
           alt={alt}
           onLoadStart={() => {
@@ -158,7 +162,7 @@ const ImageRenderer = ({
             setDefaultComponentVisible(true);
             onError();
           }}
-        />
+        />}
       </div>
     )
   );

src/ui/MessageContent/__tests__/__snapshots__/MessageContent.spec.js.snap

@@ -24,12 +24,7 @@ exports[`ui/MessageContent should do a snapshot test of the MessageContent DOM 1
           >
             <div
               class="sendbird-image-renderer__image"
-              style="width: 100%; min-width: min(400px, 28px); max-width: 400px; position: absolute; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url();"
-            />
-            <img
-              alt=""
-              class="sendbird-image-renderer__hidden-image-loader"
-              src=""
+              style="width: 100%; min-width: min(400px, 28px); max-width: 400px; position: absolute;"
             />
           </div>
         </div>

src/ui/OGMessageItemBody/__tests__/__snapshots__/OGMessageItemBody.spec.js.snap

@@ -25,12 +25,7 @@ exports[`ui/OGMessageItemBody should do a snapshot test of the OGMessageItemBody
       >
         <div
           class="sendbird-image-renderer__image"
-          style="width: 100%; min-width: min(400px, 100%); max-width: 400px; position: absolute; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url();"
-        />
-        <img
-          alt=""
-          class="sendbird-image-renderer__hidden-image-loader"
-          src=""
+          style="width: 100%; min-width: min(400px, 100%); max-width: 400px; position: absolute;"
         />
       </div>
     </div>

yarn.lock

@@ -2648,15 +2648,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sendbird/chat@npm:^4.10.9":
-  version: 4.10.9
-  resolution: "@sendbird/chat@npm:4.10.9"
+"@sendbird/chat@npm:^4.10.10":
+  version: 4.10.10
+  resolution: "@sendbird/chat@npm:4.10.10"
   peerDependencies:
     "@react-native-async-storage/async-storage": ^1.17.6
   peerDependenciesMeta:
     "@react-native-async-storage/async-storage":
       optional: true
-  checksum: d680ca5aa56dea056aad62a37acc751e0478340638a7cfc0234d5837633aee2a66fee598a27d51157cfddba0f16fceca24cbd5268f9a887a74022d55ca5981da
+  checksum: aa84479f4706b6b06befc9ea8121ebd9f456bc1fec57a3fceae5fe713e0a3015224211d2a40c5f0fa9a3b7474987b753f1dcbc151daa39933efb59c685f22824
   languageName: node
   linkType: hard
 
@@ -2678,7 +2678,7 @@ __metadata:
     "@rollup/plugin-node-resolve": ^15.2.3
     "@rollup/plugin-replace": ^5.0.4
     "@rollup/plugin-typescript": ^11.1.5
-    "@sendbird/chat": ^4.10.9
+    "@sendbird/chat": ^4.10.10
     "@sendbird/uikit-tools": 0.0.1-alpha.62
     "@storybook/addon-actions": ^6.5.10
     "@storybook/addon-docs": ^6.5.10