From e4456f3f42caa130a007e4b502cea83a64b7a43d Mon Sep 17 00:00:00 2001
From: GitPersSiham <44850768+GitPersSiham@users.noreply.github.com>
Date: Tue, 16 Jul 2024 23:37:41 +0200
Subject: [PATCH] feat: add default images for products without image in
 off.html #208 (#220)

I added the
src="https://world.openfoodfacts.org/images/icons/dist/packaging.svg" as
a default image in off.html

fixes: https://github.com/openfoodfacts/search-a-licious/issues/208
---
 frontend/public/off.html | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/frontend/public/off.html b/frontend/public/off.html
index 557a65b3..d7f24766 100644
--- a/frontend/public/off.html
+++ b/frontend/public/off.html
@@ -89,6 +89,7 @@
         height: 144px;
         margin: 12px;
       }
+     
       searchalicious-results::part(image) {
         object-fit: contain;
         width: 100%;
@@ -395,6 +396,7 @@
                                               loading="lazy"
                                               part="image"
                                               src="${result.image_small_url}"
+                                              onerror="handleImageError(event)"
                                       />
                                     </div>
                                     <div part="product-name">
@@ -451,7 +453,14 @@
     <script src="https://static.openfoodfacts.org/js/dist/scrollNav.js"></script>
 
     <script src="vega5.js"></script>
+    <script>
+      const defaultImageUrl = 'https://world.openfoodfacts.org/images/icons/dist/packaging.svg';
 
+      function handleImageError(event) {
+          event.target.src = defaultImageUrl;
+      
+      }
+  </script>
     <script
       src="https://static.openfoodfacts.org/js/dist/foundation.js"
       data-base-layout="true"