img 标签引入验证码时报错：Refused to losd the image ‘＜URL＞‘ beceuse it violates the following content security

问题

在使用 <img :src='codeURL'>时报错如下

Refused to losd the image '<URL>' beceuse it violates the following content security Policy directive : "default-sre 'self'",Note that 'img-src' was not explicitiy set，so 'default-src' is used as a fa1lbBck.

（拒绝加载图像“ ”，因为它违反了以下内容安全规定：“ default-src *”。 请注意，未明确设置“ img-src”。）

分析

这个错误提示说明你尝试加载的图片因为内容安全策略（CSP）被阻止了。CSP 设置为只允许来自同一源（‘self’）的资源，而因为 img-src 没有明确设置，所以使用了 default-src 作为备选策略，导致图片被阻止。

要解决这个问题，你需要调整 CSP 设置以允许来自特定来源的图片。具体步骤如下：

1. 更新 Meta 标签【main】

<meta http-equiv="Content-Security-Policy" content="default-src 'self';img-src * data:; style-src 'self' 'unsafe-inline'; script-src 'self'"/>

2. 或

<meta http-equiv="Content-Security-Policy" content="default-src *;img-src 'self' data: base64; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-eval'"/>

设置 " img-src ‘self’ data: base64; " 即可。