如何解决下一个图像组件不显示Cloudinary图像
在上一个问题中,作者尝试加载标准DOM img
:
cloudinary image doesn't show up
答案是为Image指定cloudName
和publicId
道具-
<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"
/>
</>
);
}
Codesandbox链接: 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"
解决方法
除非我缺少任何内容,否则cloudName
和publicId
是Cloudinary's React SDK的属性,它们不是Next的Image组件的一部分。这意味着您必须自己签订Cloudinary URL。
我在这里找到答案: 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。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。