next.js - Next.js 图像组件不显示 Cloudinary 图像

Question

在上一个问题中，作者尝试加载标准 DOM img: cloudinary image doesn't show up

答案是指定cloudName和publicId支持Image-

<Image cloudName="doqurzmbt" publicId="public id from cloudinary" ... >

我正在尝试使用 NextImage组件来处理 Cloudinary 图像：

1. 填写next.config.js：

module.exports = {
  images: {
    deviceSizes: [300, 640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    domains: ["res.cloudinary.com"],
    loader: "cloudinary",
  },
};

2. 编写示例代码：

import Image from "next/image";
export default function Page() {
  return (
    <>
      <p>Simple cloudinary example</p>
      <p>Standart image</p>
      <img
        src="https://res.cloudinary.com/dljazkzna/image/upload/v1604677935/img/1053.jpg"
        alt=""
        width="200"
      />
      <p>NextJS Image component</p>
      <Image
        alt="Cloudinary image"
        cloudName="dljazkzna"
        publicId="img/1053"
        width={300}
        height={300}
        src="1053.jpg"
      />
    </>
  );
}

Codesandbox 链接： https ://codesandbox.io/s/nextjs-cloudinary-779pr?file=/pages/index.js

问题： Image组件不显示图像。根据文档： https://nextjs.org/docs/api-reference/next/image cloudName组件中publicId没有道具Image。

我需要传递给 NextImage组件的参数是什么？

Cloudinary 图像具有以下属性：

src="https://res.cloudinary.com/dljazkzna/image/upload/v1604677935/img/1053.jpg"
cloudName="dljazkzna"
publicId="img/1053"

Answer 1

我在这个地方找到了答案： https ://github.com/vercel/next.js/discussions/18538

问题出在 next.config.js 工作变体是：

module.exports = {
      images: {
        domains: ["res.cloudinary.com"],
      },
    };

uinstinct 写道，不可能混合 domain 参数和 loader 参数。如果domain = ["res.cloudinary.com"]src 接受绝对 URL。