Así que tengo este elemento de imagen.
<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>Puede ver que si la imagen no se carga correctamente, no mostrará nada. ¿Cómo hago para que el párrafo solo se muestre si la imagen no se cargó, pero no se mostrará si la imagen se cargó correctamente?
Ocultaría el elemento p de forma predeterminada, luego adjuntaría un detector de eventos al evento "error" de la imagen, en el que mostraré el párrafo.
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>