Next JS 和 Cloudinary,图像未加载
Next JS and Cloudinary, images not loading
我正在学习 Next JS,我正在尝试将我的应用程序导出为静态站点。结果,我正在使用 Cloudinary 处理图像,问题是它们没有显示。接下来 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}
/>
包含转换时对资产的 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
) 之后。
将它们移动到正确的位置意味着图像按预期加载:
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/
然后将完整的 public_id(包括 next-tutorial
文件夹)包含在 <Image/>
组件的 src
中。例如
src="/next-tutorial/images/profile_ileph2.jpg"
有关 Cloudinary URLs 结构的更多详细信息,请参阅文档的以下部分:
https://cloudinary.com/documentation/image_transformations#transformation_url_syntax
我正在学习 Next JS,我正在尝试将我的应用程序导出为静态站点。结果,我正在使用 Cloudinary 处理图像,问题是它们没有显示。接下来 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}
/>
包含转换时对资产的 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
) 之后。
将它们移动到正确的位置意味着图像按预期加载: 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/
然后将完整的 public_id(包括 next-tutorial
文件夹)包含在 <Image/>
组件的 src
中。例如
src="/next-tutorial/images/profile_ileph2.jpg"
有关 Cloudinary URLs 结构的更多详细信息,请参阅文档的以下部分: https://cloudinary.com/documentation/image_transformations#transformation_url_syntax