[fix] if image load fails on client side, show default image

BTW: change icon color from red to gray

Closes:

- https://github.com/searxng/searxng/issues/4066

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>

searx/static/themes/simple/src/js/main/results.js

@@ -7,13 +7,14 @@
   }
 
   searxng.ready(function () {
-    d.querySelectorAll('#urls img.image').forEach(
+    d.querySelectorAll('#urls img').forEach(
       img =>
         img.addEventListener(
           'error', () => {
-            img.style.display = 'none';
-            img.error = null;
-          }
+            // console.log("ERROR can't load: " + img.src);
+            img.src = window.searxng.settings.theme_static_path + "/img/img_load_error.svg";
+          },
+          {once: true}
         ));
 
     if (d.querySelector('#search_url button#copy_url')) {

searx/static/themes/simple/svg4web.svgo.js

@@ -14,6 +14,5 @@ module.exports = {
     'sortAttrs',
     // Optimize SVG for WEB usage
     'convertStyleToAttrs',
-    'removeXMLNS'
   ],
 };

src/brand/img_load_error.svg

@@ -50,17 +50,17 @@
   </metadata>
   <path
      d="M 39.581382,41.421315 H 30.62689 v -1.21543 q 0,-2.033984 0.818554,-3.59668 0.818555,-1.5875 3.447852,-4.018359 l 1.5875,-1.438672 q 1.413867,-1.289844 2.058789,-2.43086 0.669727,-1.141015 0.669727,-2.282031 0,-1.736328 -1.190625,-2.703711 -1.190625,-0.992188 -3.323828,-0.992188 -2.00918,0 -4.340821,0.84336 -2.331641,0.818554 -4.861719,2.455664 v -7.788673 q 3.001367,-1.041796 5.481836,-1.53789 2.480469,-0.496094 4.787305,-0.496094 6.052344,0 9.227344,2.480469 3.175001,2.455664 3.175001,7.19336 0,2.430859 -0.967383,4.365625 -0.967383,1.909961 -3.299024,4.117578 l -1.5875,1.413868 q -1.686719,1.53789 -2.207617,2.480469 -0.520899,0.917773 -0.520899,2.033984 z m -8.954492,3.671094 h 8.954492 v 8.830469 H 30.62689 Z"
-     style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:50.80000305px;line-height:1;font-family:'DejaVu Sans';-inkscape-font-specification:'DejaVu Sans Bold';display:inline;fill:#db3434;fill-opacity:1;stroke-width:0.26458335"
+     style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:50.80000305px;line-height:1;font-family:'DejaVu Sans';-inkscape-font-specification:'DejaVu Sans Bold';display:inline;fill:#808080;fill-opacity:1;stroke-width:0.26458335"
      id="path827"
      inkscape:connector-curvature="0" />
   <circle
-     style="fill:none;fill-opacity:1;stroke:#db3434;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     style="fill:none;fill-opacity:1;stroke:#808080;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
      id="path834"
      cx="35"
      cy="36.486031"
      r="30" />
   <rect
-     style="opacity:1;fill:#db3434;fill-opacity:1;stroke:none;stroke-width:8;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     style="opacity:1;fill:#808080;fill-opacity:1;stroke:none;stroke-width:8;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
      id="rect912"
      width="18.846331"
      height="39.963303"