时间戳

首页 > 解决方案 > 根据是否加载图像元素显示段落元素

javascript - 根据是否加载图像元素显示段落元素

问题描述

所以我有这个图像元素。

<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>

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

标签： javascripthtmlcss

解决方案

我会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>

推荐阅读