Skip to content

Instantly share code, notes, and snippets.

@brianherbert
Created May 9, 2019 14:15
Show Gist options
  • Save brianherbert/8bb58d97c6731c114b86cab52683f9dc to your computer and use it in GitHub Desktop.
Save brianherbert/8bb58d97c6731c114b86cab52683f9dc to your computer and use it in GitHub Desktop.
Replace broken source image with img src in picture element
<html>
<head>
<title>Picture Test</title>
</head>
<body>
<p>
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="hello.webp" type="image/webp">
<!--[if IE 9]></video><![endif]-->
<img src="hello.jpg" alt="No working images.">
</picture>
</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$("img").on("error", function() {
$(this).siblings("source").remove();
$(this).unbind("error").attr('src',$(this).attr("src"));
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment