错误：API 图像采用 WEBP 格式，当使用下一个图像时，它们会在浏览器中损坏

Question

我正在使用 Next.Js 制作一个使用 API 的应用程序，其中一个键是包含 WEBP 格式的产品图像的 URL，即使在 next.config.js 中进行了所有正确的设置，图像已损坏，并且也不显示替代文本。

   //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>
       )

//浏览器
在此输入图片描述

Answer 1

您可以使用 sharp 并将它们改为

png

。

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');