我正在学习 Next JS,我正在尝试将我的应用程序导出为静态站点。结果,我正在使用 Cloudinary 处理图像,问题是它们没有显示。 Next JS 似乎在 URL 中添加了一些参数,这会破坏图像,这是一个示例:
似乎路径中额外的 f_auto,c_limit,w_384,q_auto 打破了它。
这是因为我有一个免费的 Cloudinary 帐户吗?我该如何解决这个问题?
作为引用,这是我的 next.config.js:
module.exports = {
basePath: '/out',
assetPrefix: '/out',
images: {
loader: 'cloudinary',
imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
path: 'https://res.cloudinary.com/dnliyglel/image/upload/v1624031405/next-tutorial/',
},
exportPathMap: async function() {
const paths = {
'/': { page: '/' },
'/posts/first-post': { page: '/posts/first-post'}
};
return paths;
}
};
这是一个如何将其添加到组件的示例:
<Image
priority
src="/images/profile_ileph2.jpg"
className={utilStyles.borderCircle}
height={144}
width={144}
alt={name}
/>
最佳答案
包含转换时 Assets 的 URL 不正确。
https://res.cloudinary.com/dnliyglel/image/upload/v1624031405/next-tutorial/f_auto,c_limit,w_384,q_auto/images/profile_ileph2.jpg
版本号 (v1624031405
) 和 public_id 的文件夹部分 (next-tutorial
) 在转换之前,而 public_id 的其余部分 (images/profile_ileph2
) 在转换之后。 p>
将它们移动到正确的位置意味着图像按预期加载: https://res.cloudinary.com/dnliyglel/image/upload/f_auto,c_limit,w_384,q_auto/v1624031405/next-tutorial/images/profile_ileph2.jpg
您可以尝试更改 path
来自:
https://res.cloudinary.com/dnliyglel/image/upload/v1624031405/next-tutorial
收件人:
https://res.cloudinary.com/dnliyglel/image/upload/
然后在您的 next-tutorial
中包含完整的 public_id(包括 <Image/>
文件夹)组件的 src
.例如
src="/next-tutorial/images/profile_ileph2.jpg"
有关 Cloudinary URL 结构的更多详细信息,请参见文档的以下部分: https://cloudinary.com/documentation/image_transformations#transformation_url_syntax
关于javascript - Next JS 和 Cloudinary,图像未加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68039390/