So I have this image element.
<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>
You can see that if the image does not load up properly, it will show nothing. How do I have it so that the paragraph only shows if the image did not load up, but it will not show if the image loaded properly?
I would make the p element hidden by default, then attach an event listener to the "error" event of the image, in which I will show the paragraph.
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>