Nuxt Cloudinary 模块：获取未托管在 Cloudinary 上的图像时图像损坏

Question

我正在尝试获取和优化未托管在 Cloudinary 上的图像。我正在关注此处列出的文档：

https://cloudinary.nuxtjs.org/snippets#fetch-and-optimize-an-image-not-hosted-in-cloudinary

我设置了一个普通的 Nuxt 沙箱并试图让它工作：

https://codesandbox.io/s/cranky-lake-py250?file=/components/Tutorial.vue

如您所见，图像在获取时损坏了。知道我做错了什么吗？我有这样设置的 nuxt 配置 js 文件：

  modules: ["@nuxtjs/cloudinary"],
  cloudinary: {
    cloudName: "dtzsbdaxt",
    useComponent: true
  },

如果我遗漏了应该在此处列出的任何其他选项，请告诉我。谢谢！

Answer 1

作为一般答案，此问题可能会在 2 种情况下发生：

1. 在“设置”>“安全 - 受限媒体文件”下，获取的 URL 设置受到限制（复选框），
2. 或者在“设置”>“安全”下的“允许的提取域”下设置域，这是您的情况。

您可以在此处找到文档参考：https://cloudinary.com/documentation/fetch_remote_images#restricting_the_allowed_fetch_domains（参见选项 1 的注释）