-
Notifications
You must be signed in to change notification settings - Fork 92
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Always create webp version #44
Comments
Hi @klase |
If I understand correctly what you're trying to achieve you can do it this way: import React from 'react'
export default function Image(props) {
return (
<picture>
<source
srcSet={require(`../static/images/${props.src}?webp`)}
type="image/webp"
/>
<source
srcSet={require(`../static/images/${props.src}`)}
type={`image/${props.src.split('.').pop()}`}
/>
<img
src={require(`../static/images/${props.src}`)}
width={props.width}
height={props.height}
alt={props.alt}
className={props.className}
/>
</picture>
)
} Then then use component anywhere in your pages or other components: <Image src="image.png" width="237" height="237" className="img-fluid" alt="Improve comfort" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
How can I configure this plugin to always create a webp version when requiring an image (I.e without having to require twice )?
E.g so require('./images/someimage.jpg') should create two output files, one optimised .jpg and one optimised .webp
The text was updated successfully, but these errors were encountered: