[fix] simple theme: hide the image if img load fails

Add event listener to query selector::

    '#urls img.image'

From the user point of view, I think it is better to hide the image:
img_load_error.svg is helplful in the image category because it still allows to
select the image. IMO, in the news category, the fact there is a missing image
won't help to choose the links. From a developer point of view, the place holder
is signal that may be the engine needs to be updated (at least give a look). The
browser console should show the same information too, but it requires some
additional steps. [1]

[1] https://github.com/searxng/searxng/pull/610#issuecomment-997640132

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

1 files changed, 9 insertions, 0 deletions

diff --git a/searx/static/themes/simple/src/js/main/results.js b/searx/static/themes/simple/src/js/main/results.js
index b6b4d0834..b9bd43394 100644
--- a/searx/static/themes/simple/src/js/main/results.js
+++ b/searx/static/themes/simple/src/js/main/results.js
@@ -6,6 +6,15 @@
     searxng.image_thumbnail_layout = new searxng.ImageLayout('#urls', '#urls .result-images', 'img.image_thumbnail', 14, 6, 200);
     searxng.image_thumbnail_layout.watch();
 
+    d.querySelectorAll('#urls img.image').forEach(
+      img =>
+        img.addEventListener(
+          'error', () => {
+            img.style.display = 'none';
+            img.error = null;
+          }
+        ));
+
     searxng.on('.btn-collapse', 'click', function () {
       var btnLabelCollapsed = this.getAttribute('data-btn-text-collapsed');
       var btnLabelNotCollapsed = this.getAttribute('data-btn-text-not-collapsed');