Resulta que tengo una imagen estilizada con una lista dentro en alguna página HTML.
Si no se puede mostrar la imagen, quiero tener una lista HTML normal en su lugar (de forma similar a un texto alternativo, pero con etiquetas HTML y no solo texto).
¿Hay una mejor manera de hacer eso? (como una regla CSS o algo así?)
Gracias
Hay una forma estándar de hacer esto sin recurrir a JavaScript. Utilice el elemento objeto en lugar del elemento img. Si la imagen no se puede mostrar, se utiliza el contenido del elemento del objeto. Asi que:
<p>When the image displays:</p> <object data="https://via.placeholder.com/50" style="height:50px"> <ul> <li>list item 1</li> <li>list item 2</li> </ul> </object> <p>When the image doesn't display:</p> <object data="https://error.placeholder.com/50" style="height:50px"> <ul> <li>list item 1</li> <li>list item 2</li> </ul> </object>la lista se superpone normalmente a la imagen. si la imagen tiene un error al cargar, se volverá invisible.
aunque no estoy 100% seguro de que funcione.
CSS:
img { z-index: 1; position: absolute; top:0px; left:0px; } ul { /*z-index: 0;*/ position: absolute; top:0px; left:0px; }html:
<ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> <img src="image.jpg" onerror="document.querySelector('img').style.visibility = "hidden"">puede diseñar la lista como desee.
Puede escuchar el evento de error , que se activa cuando el recurso no se puede cargar:
function badImage(imageElement){ imageElement.outerHTML = "This image can't be shown" } <img src="https://.com" onerror="badImage(this)">