Ähnlich wie das Video-Tag mehrere Quellenattribute bereitstellen kann, damit ein mp4-Video auf ein ogg-Video zurückfallen kann, würde ich gerne ein svg-Bild bekommen, um auf ein png-Bild zurückzugreifen.Kann ein HTML-Img-Tag mehrere src-Attribute haben?
Es gibt einen Beitrag hier, die helfen könnten: Fallback image and timeout - External Content. Javascript
Es bietet ein paar Javascript-Optionen.
Die Verwendung eines Hintergrundbildes funktioniert gut, aber Sie müssen wissen, wie groß die Abmessungen Ihrer Bilder sind. Wenn Sie es nicht wissen, kann es schwierig sein.
Nein, kann es nicht.
Allerdings können Sie es mit CSS-Hintergrundbildern vortäuschen.
Um zu vermeiden, dass das gebrochene Bildsymbol angezeigt wird, möchten Sie möglicherweise kein -Tag verwenden und stattdessen zwei verschachtelte Elemente mit unterschiedlichen Hintergrundbildern verwenden. (Beachten Sie, dass die Zugänglichkeit schaden würde)
Einfache Antwort ... Nr
schließen Sie einfach das svg als <object> und setzen <img> im Inneren.
<object data='image.svg'>
<img src='image.png'>
</object>
Das sollte funktionieren. Das PNG-Bild wird nur angezeigt, wenn es nicht möglich ist, Svg anzuzeigen.
Leider verhalten sich Objekt und img nicht gleich. Img nimmt Größe von der Svg besser als Objekt und verhält sich auch besser, wenn gezoomt. Objekt kann Skripte ausführen und img nicht. Auch img ist semantisch was ich meine und Objekt fühlt sich an wie ein Hack. –
Obwohl dies ist wahrscheinlich nicht das, was man wollte, dann ist es erwähnenswert, dass Sie different resolutions for retina displays angeben:
<img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x,
image-3x.png 3x, image-4x.png 4x">
Zum Zeitpunkt der Frage es nicht möglich war. Aber jetzt ist es in Ordnung, wie dies zu tun:
<picture>
<source srcset="mdn-logo.svg" type="image/svg+xml">
<img src="mdn-logo.png" alt="MDN">
</picture>
Siehe docs on MDN
Dies würde auch bedeuten Transparenz verzichten, als SVG und PNG nicht Pixel perfekte Paarungen sein, vor allem, wenn die Seite in wurde gezoomt. –
Daran hatte ich nicht gedacht. – SLaks