如何使用NuxtJS从strapi渲染图像(从cloudinary) ?

Question

我正在从包含有关CMS内容的所有信息的Strapi CMS中获取一些数据。我试图使用数据来渲染图像(云计算提供商)在我的下一个web应用程序，但我得到以下错误:

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规则来允许来自cloudary的图像:https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP

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

我要看的第一件事是谁在为你的项目设置CSP规则?有人正在设置规则"img-src 'self' data:"。