Error: The API images are in WEBP format and when using next image they break in the browser

Question

I'm using Next.Js to make an application that consumes an API that in one of the keys is a URL that contains the image of a product in WEBP format, and even with all the correct settings in next.config.js the images are broken and they also don't show the alternative text.

javascript

//next image configuration
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    formats: ['image/webp', 'image/avif'],
    domains: [
      "mks-sistemas.nyc3.digitaloceanspaces.com",
    ]
  }
};

export default nextConfig;  

//component
import Image from "next/image"

export const ProductCard = ({ product }: IProductsCardProps): JSX.Element => {
  return (
    <li>
      <div>
        <Image src={product.img} alt={product.name} width={100} height={90} />
        {/* <img src={product.img} alt="" /> */}
      </div>
      <div>
        <h2>{product.name}</h2>
        <p>{product.description}</p>
      </div>
      <span>{product.price}</span>
    </li>
  )
}        

//Browser
enter image description here

Answer 1

You could use sharp and make them png instead.

https://nextjs.org/docs/messages/install-sharp

const { Sharp } = require('sharp');

const convertImage = async (webpImagePath, outputPath) => {
  try {
    // Open the .webp image
    const image = Sharp(webpImagePath);

    // Convert the image to PNG format
    await image
      .png()
      .toFile(`${outputPath}.png`);

    console.log('Image converted successfully!');
  } catch (error) {
    console.error('Error converting image:', error);
  }
};

// Usage
convertImage('path_to_your_image.webp', 'output_image');