Nuxt Cloudinary Module获取非Cloudinary托管图片时出现损坏问题排查

问题解决方案 #

你需要补全以下3处配置即可解决图片损坏问题：

1. 补全nuxt.config.js的Cloudinary配置
   在原有配置基础上新增secure字段，强制生成HTTPS格式的资源链接，避免HTTP/HTTPS混合内容导致的加载失败。如果有固定拉取的外部图片域名，也可配置全局fetchDomain减少重复代码：

modules: ["@nuxtjs/cloudinary"],
cloudinary: {
  cloudName: "dtzsbdaxt",
  useComponent: true,
  secure: true, 
  // 可选：固定拉取的外部资源根域名，配置后调用组件时无需重复传域名前缀
  // fetchDomain: "https://你的外部图片所属根域名.com"
}

2. 配置Cloudinary后台域名白名单
   登录Cloudinary控制台，进入「设置 > 安全」页面，找到「允许的Fetch域名」配置项，将你要优化的非Cloudinary托管图片的所属域名添加到白名单中。未配置白名单时Cloudinary会直接拦截fetch请求，返回损坏的占位资源。
3. 修正组件调用参数
   使用<CldImage>组件加载外部资源时，必须指定delivery-type="fetch"属性，src参数填写外部图片的完整公网可访问链接，示例代码如下：

<CldImage
  width="600"
  height="600"
  delivery-type="fetch"
  src="https://完整的外部图片公网链接.jpg"
  alt="图片说明"
/>

内容的提问来源于stack exchange，提问作者redshift