From f75199b1ece4c67a19160ef9c7c5baabd21ebd50 Mon Sep 17 00:00:00 2001 From: Markus Heiser Date: Wed, 29 Dec 2021 14:30:16 +0100 Subject: [PATCH] [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 --- searx/static/themes/simple/src/js/main/results.js | 9 +++++++++ 1 file changed, 9 insertions(+) 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');