根据是否加载图像元素显示段落元素[重复]答案

【问题标题】：Show paragraph element based on whether image element was loaded [duplicate]根据是否加载图像元素显示段落元素[重复]
【发布时间】：2021-12-23 11:53:26
【问题描述】：

所以我有这个图像元素。

<img src={{this.vac-card.vac_card_url}} alt="vac-card.png" id="vac-card-image" onerror="this.style.display='none'">

<p><a href={{url}} target="_blank">Click here to download.</a></p>

您可以看到，如果图像没有正确加载，它不会显示任何内容。如何让段落仅在图像未加载时显示，但如果图像加载正确则不会显示？

【问题讨论】：

标签： javascript html css

【解决方案1】：

我会默认隐藏p元素，然后将事件监听器附加到图像的“错误”事件中，我将在其中显示段落。

let img = document.getElementById("vac-card-image");
let paragraph = document.getElementById("my-paragraph");
img.addEventListener("error", () => paragraph.style.display = "block");

p { display: none }

<img src={{this.vac-card.vac_card_url}} alt="vac-card.png" id="vac-card-image" onerror="this.style.display='none'">

<p id="my-paragraph"><a href={{url}} target="_blank">Click here to download.</a></p>

【讨论】：

好吧，如果它按照操作员的要求去做，那就是这样，但事实并非如此。它会抛出一个关于不知道 src 属性是什么的错误。由于这个原因，这不会执行您在答案中描述的操作。具体来说，在它抛出语法错误后，它仍然显示<p> 元素。