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

Question

我正在尝试将 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}/>

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

我该如何解决这个问题？

Answer 1

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

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

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