下一个 JS 和 Cloudinary，图像未加载

Posted 2023-03-25

【中文标题】下一个 JS 和 Cloudinary，图像未加载

【英文标题】：Next JS and Cloudinary, images not loading

【发布时间】：2021-09-03 10:34:57

【问题描述】：

我正在学习 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
/>

【参考方案1】：

包含转换时资产的 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/

然后在您的<Image/> 组件的src 中包含完整的public_id（包括next-tutorial 文件夹）。例如

src="/next-tutorial/images/profile_ileph2.jpg"

有关 Cloudinary URL 结构的更多详细信息，请参阅文档的以下部分： https://cloudinary.com/documentation/image_transformations#transformation_url_syntax