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

Question

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

不带装载机

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}/>

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

我怎么解决这个问题？

score 0 · Accepted Answer

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

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

查看图像优化文档以获取更多详细信息。