3

Currently, I'm using the Webp image format with the next/image in my project. It's working fine. But, I would like to show the fallback image (PNG or JPG) when the browser is not supported the webp format. How can I do that with the next/image? I have searched all over the place and still can't find a solution.

import Image from 'next/image'

const NextImage = ({imgSrc}) => {
  return (
    <Image 
      src={imgSrc}
      alt="product image"
      width="500px"
      height="500px"
      / >
  )
}
kogyikyaw
  • 55
  • 2
  • 7
  • Does this answer your question? [WEBP image fall back](https://stackoverflow.com/questions/47607201/webp-image-fall-back) – Matt Coady Nov 02 '22 at 15:56
  • I know I can do it with the native image element. But I'm not sure whether the native image element supports built-in image optimization or not as the next/image did. That's why I want to use the next/image – kogyikyaw Nov 02 '22 at 16:06
  • `next/image` handles this automatically internally. It will optimise the image based on the browser you're rendering the image to, include its format. See https://nextjs.org/docs/api-reference/next/image#acceptable-formats. – juliomalves Nov 07 '22 at 22:39
  • If you're still curious on how to setup an image fallback logic, you may want to have a look at [What is the best way to have a fallback image in NextJS?](https://stackoverflow.com/questions/66949606/what-is-the-best-way-to-have-a-fallback-image-in-nextjs). – juliomalves Nov 07 '22 at 22:41

0 Answers0