Next.js Cloudinary 图像未使用加载程序显示

Posted 2023-03-06

【中文标题】Next.js Cloudinary 图像未使用加载程序显示

【英文标题】：Next.js Cloudinary images not displaying with loader

【发布时间】：2021-09-20 10:47:21

【问题描述】：

我正在尝试将 next/image 组件与 cloudinary.com 和 cloudinary 加载器一起使用。但是我的图片没有加载器显示，它只显示没有加载器。

没有装载机

next.config.js文件：

module.exports = 
    images:    
        domains: ['res.cloudinary.com'],
    ,

我的图片组件：

<Image src="https://res.cloudinary.com/eminvarol/image/upload/v1625915405/index-backround_rubhkh.jpg" width=500 height=500/>

这是在这里工作

带装载机

next.config.js文件：

module.exports = 
    images:    
        domains: ['res.cloudinary.com'],
        loader: 'cloudinary'
    ,

我的图片组件是一样的：

<Image src="https://res.cloudinary.com/eminvarol/image/upload/v1625915405/index-backround_rubhkh.jpg" width=500 height=500/>

使用加载器，我的页面看起来像这样

我该如何解决这个问题？

【参考方案1】：

使用有效的第三方加载器时，语法略有不同。您需要定义一个loader 和一个path。

module.exports = 
    images: 
        loader: 'cloudinary',
        path: '<cloudinary-path-here>'
    

查看Image Optimization docs了解更多详情。

【讨论】：

谢谢兄弟，我添加了路径res.cloudinary.com/eminvarol'并将我的图片src从res.cloudinary.com/eminvarol......." 更改为image_name.jpg