Next.js 图像组件不显示 Cloudinary 图像答案

【问题标题】：Next.js Image component doesn't show Cloudinary imageNext.js 图像组件不显示 Cloudinary 图像
【发布时间】：2021-02-20 09:35:39
【问题描述】：

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

答案是将cloudName 和publicId 属性指定为Image -

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

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

填写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",
  },
};

编写示例代码：

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"
      />
    </>
  );
}

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

问题： Image 组件不显示图像。根据文档： https://nextjs.org/docs/api-reference/next/image cloudName 和 publicId 属性在 Image 组件中不存在。

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

Cloudinary 图像具有以下属性：

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

【问题讨论】：

标签： next.js cloudinary nextjs-image

【解决方案1】：

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

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

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

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

【讨论】：