javascript - Next JS 和 Cloudinary，图像未加载

Question

我正在学习 Next JS，我正在尝试将我的应用程序导出为静态站点。结果，我正在使用 Cloudinary 处理图像，问题是它们没有显示。 Next JS 似乎在 URL 中添加了一些参数，这会破坏图像，这是一个示例:

https://res.cloudinary.com/dnliyglel/image/upload/v1624031405/next-tutorial/f_auto,c_limit,w_384,q_auto/images/profile_ileph2.jpg (不起作用)

https://res.cloudinary.com/dnliyglel/image/upload/v1624031405/next-tutorial//images/profile_ileph2.jpg (有效)

似乎路径中额外的 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}
/>

Answer 1

包含转换时 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