How can I add a fallback image if the image specified in the source tag is missing? For example
<picture>
<source srcset="image.webp 1x, [email protected] 2x" type="image/webp">
<img srcset="image.jpg 1x, [email protected] 2x" src="image.jpg" onerror="this.onerror=null;this.srcset='not-found.jpg 1x, [email protected] 2x'">
</picture>
If image.webp is missing, how can I show a fallback image? Putting onerror="this.src='fallback.jpg'"
on the img
tag works if the browser doesn't support webp images, but same If I put that code on the source
tag doesn't work
EDIT
Updated the code, it now works on browser which doesn't support webp images (safari) but I'm still not able to show a not-found.webp
images for other browsers
picture
tag but a singleobject
tag