Tout comme la balise vidéo peut fournir plusieurs attributs source pour qu'une vidéo mp4 puisse retomber dans une vidéo ogg, j'aimerais obtenir une image svg pour revenir à une image png.Une balise HTML img peut-elle avoir plusieurs attributs src?
Il y a un poste ici qui pourrait aider: Fallback image and timeout - External Content. Javascript
Il offre quelques options javascript. L'utilisation d'une image d'arrière-plan fonctionne bien, mais vous devrez connaître les dimensions de vos images. Si vous ne le savez pas, cela peut être difficile.
Non, ça ne peut pas. Cependant, vous pouvez truquer à l'aide d'images d'arrière-plan CSS.
Pour éviter d'afficher le glyphe d'image tronquée, vous pouvez ne pas utiliser du tout de balise <img> et utiliser à la place deux éléments imbriqués avec différentes images d'arrière-plan. (Notez que cela nuirait à l'accessibilité)
La réponse est simple ... Non
comprennent Juste le svg comme <object> et mis <img> à l'intérieur de celui-ci.
<object data='image.svg'>
<img src='image.png'>
</object>
Cela devrait fonctionner. L'image png ne sera affichée que s'il est impossible d'afficher svg.
Malheureusement, l'objet et img ne se comportent pas de la même manière. img ramasse la taille du svg mieux que l'objet et se comporte également mieux quand zoomé. L'objet peut exécuter des scripts et img ne peut pas. Aussi img est sémantiquement ce que je veux dire et l'objet se sent comme un hack. –
Bien que ce soit probablement pas ce que vous vouliez, il convient de mentionner que vous pouvez spécifier different resolutions for retina displays:
<img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x,
image-3x.png 3x, image-4x.png 4x">
Au moment de la question, il n'a pas été possible. Mais maintenant, il est correct de faire comme ceci:
<picture>
<source srcset="mdn-logo.svg" type="image/svg+xml">
<img src="mdn-logo.png" alt="MDN">
</picture>
Voir docs on MDN
Cela signifierait également la transparence qui précède, comme svg et .png ne serait pas parfait pixels matchs, surtout si la page a été agrandie. –
Je n'avais pas pensé à ça. – SLaks