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

Posted 2023-03-06

【中文标题】Next.js 图像组件不显示 Cloudinary 图像

【英文标题】：Next.js Image component doesn't show Cloudinary image

【发布时间】：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"
        
        
      />
      <p>NextJS Image component</p>
      <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"

【参考方案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。