如何使用 NuxtJS 从 strapi 渲染图像（来自 cloudinary）？

Question

我正在从 Strapi CMS 获取一些数据，其中包含有关 cms 内容的所有信息。我正在尝试使用数据在我的 nuxt 网络应用程序中呈现图像（cloudinary 提供者），但出现以下错误：

Refused to load the image '(url goes here)' because it violates the following Content Security Policy directive: "img-src 'self' data:".

我的图片包含图片链接，但图片没有渲染

<img class="h-28 w-28 rounded-full border-4 border-black bg-gray-300" src="https://res.cloudinary.com/diglwbyf0/image/upload/v1680679242/20220802_161149_732ed0aa85.jpg" alt="">

我该如何解决这个问题？

Answer 1

您可以添加 CSP 规则以允许来自 Cloudinary 的图像：https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP

CSP 规则目前只允许从您的域和内联图像加载图像。

我首先要看的是谁在为您的项目设置 CSP 规则？有人在制定规则

"img-src 'self' data:"

.