如何在出错时删除/隐藏图像容器

编程问答 2022-05-25

问题描述

我一直在这里寻找答案并尝试了很多我在这里找到的不同的东西，但不幸的是没有一个对我来说是 100% 的...

我使用的是 Flickity 图片轮播。如果图像不存在，我想要做的是隐藏图像容器。

我尝试了以下方法：

$(".hideOnError").error(function() {
  $(this).parent().remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="main-carousel" data-flickity='{ "cellAlign": "left","contain": true,"wrapAround": true,"fullscreen": true,"draggable": false }'>

<div class="carousel-cell">
<img src="{{"https://f.hubspotusercontent40.net/hubfs/6269990/Media/Produktbilder/B1/B1_" + row.artikelnummer + ".jpg"}}" alt="{{row.produktname}}}"></div>

<div class="carousel-cell hideOnError">
<img src="{{"https://f.hubspotusercontent40.net/hubfs/6269990/Media/Produktbilder/B3/B3_" + row.artikelnummer + ".jpg"}}" alt="{{row.produktname}}}"></div>

<div class="carousel-cell hideOnError">
<img src="{{"https://f.hubspotusercontent40.net/hubfs/6269990/Media/Produktbilder/AB/AB_" + row.artikelnummer + ".jpg"}}" alt="{{row.produktname}}}"></div>

<div class="carousel-cell hideOnError">
<img src="{{"https://f.hubspotusercontent40.net/hubfs/6269990/Media/Produktbilder/F/F1_" + row.artikelnummer + ".jpg"}}" alt="{{row.produktname}}}"></div>

<div class="carousel-cell hideOnError">
<img src="{{"https://f.hubspotusercontent40.net/hubfs/6269990/Media/Produktbilder/F/F2_" + row.artikelnummer + ".jpg"}}" alt="{{row.produktname}}}"></div>

<div class="carousel-cell hideOnError">
<img src="{{"https://f.hubspotusercontent40.net/hubfs/6269990/Media/Produktbilder/F/F3_" + row.artikelnummer + ".jpg"}}" alt="{{row.produktname}}}"></div>

<div class="carousel-cell hideOnError">
<img src="{{"https://f.hubspotusercontent40.net/hubfs/6269990/Media/Produktbilder/F/F4_" + row.artikelnummer + ".jpg"}}" alt="{{row.produktname}}}"></div>

<div class="carousel-cell hideOnError">
<img src="{{"https://f.hubspotusercontent40.net/hubfs/6269990/Media/Produktbilder/F/F5_" + row.artikelnummer + ".jpg"}}" alt="{{row.produktname}}}"></div>

<div class="carousel-cell hideOnError">
<img src="{{"https://f.hubspotusercontent40.net/hubfs/6269990/Media/Produktbilder/MB/MB_" + row.artikelnummer + ".jpg"}}" alt="{{row.produktname}}}"></div>
  </div>

我也试过这个：

$("img").error(function() { $(this).parent().remove(); });

我在这里找到了这个：remove image and its container if image is broken

两者都删除了图像，但图像容器仍在那里，图像滑块显示一个空白的白色幻灯片。我想要它做的是完全删除图像容器，以便只显示工作图像。 我是 JS/JQuery 的完全初学者，上周我一直在使用谷歌搜索并尝试一些东西，但一直找不到有用的东西。非常感谢任何帮助！

解决方法

在您重新定义处理程序之前，您的代码会触发错误处理程序。

自 jQuery 3.x 起，.error() 也被弃用和移除

API 注：此 API 已在 jQuery 3.0 中移除；请使用 .on("error",handler) 而不是 .error(handler) 和 .trigger("error") 而不是 .error()

我会这样做

const imgUrl = "https://f.hubspotusercontent40.net/hubfs/6269990/Media/Produktbilder/";
const prodName = "{{row.produktname}}";
const artNum = "{{row.artikelnummer}}"
const html = ["B1/B1","B3/B3","AB/AB","F/F1","F/F2","F/F3","F/F4","F/F5","MB/MB"]
  .map(folder => `<div class="carousel-cell hideOnError">
    <img src="${imgUrl}/${folder}"_${artNum}.jpg" alt="${prodName}"
     onerror="$(this).closest('div.hideOnError').remove()">
  </div>`).join("");
$(".main-carousel").html(html);

<div class="carousel-cell"></div>

替代方案：

<div class="carousel-cell">
  <img src="dummy.gif" 
    onload="if (this.src.includes('dummy')) this.src=this.dataset.src"
    onerror="$(this).closest('div.hideOnError').remove()"
    data-src="{{"https://f.hubspotusercontent40.net/hubfs/6269990/Media/Produktbilder/B1/B1_" + row.artikelnummer + ".jpg"}}" alt="{{row.produktname}}}"></div>
flickityhtmlhubspotjavascriptjquery