Skip to content

Instantly share code, notes, and snippets.

@AbePlays
Created September 20, 2021 09:34
Show Gist options
  • Save AbePlays/115736f0d967d26d0986d2ddabe024cb to your computer and use it in GitHub Desktop.
Save AbePlays/115736f0d967d26d0986d2ddabe024cb to your computer and use it in GitHub Desktop.
Custom Image Component
const ImgWithFallback = ({
src: string,
fallback: string,
type = 'image/webp',
...props
}) => {
return (
<picture>
<source srcSet={src} type={type} />
<img src={fallback} {...props} />
</picture>
);
};
// Usage
/*
<ImgWithFallback
src="/images/me.webp"
fallback="/images/me.png"
alt="A photo of me"
/>
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment