拒绝加载图像，因为它违反了以下内容安全策略

Question

我正在用电子锻造、webpack和typescript构建一个电子应用程序。当我试图从谷歌加载一个随机图像时，它显示了的错误

Refused to load the image 'https://example.com/static/branding/product-designkits-dark.svg' because it violates the following Content Security Policy directive: "default-src 'self' 'unsafe-inline' data:". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

Refused to load the image 'https://example.com/static/branding/product-designkits-dark.svg' because it violates the following Content Security Policy directive: "img-src 'self'".
<meta http-equiv="Content-Security-Policy" content="img-src 'self'">

我试过

<meta http-equiv="Content-Security-Policy" content="img-src 'self' example.com">

但它不起作用。

Answer 1

您应该从本地服务器加载映像。因此，我建议您将图像缓存或下载到本地机器，并指定图像资源的文件位置。

• 例如，本地服务器将是您自己的计算机(开发机器(或应用程序的用户。

• 您还需要从API结果中指定的URI下载图像。在API文档中搜索图像URI。

• 然后下载并临时保存在您的本地机器或服务器上。一些API的更改图像URI(Spotify就是一个例子(，因此保存URI链接可能是一个糟糕的选择。

• 然后在用于显示图像的img元素的src属性上指定下载图像的位置。

我就是这么做的。