关于base64 img标签无法加载的问题

because it violates the following Content Security Policy directive: "img-src *". Note that '*' matches only URLs with network schemes ('http', 'https', 'ws', 'wss'), or URLs whose scheme matches `self`'s scheme. The scheme 'data:' must be added explicitly.

分析

错误提示中，已经说是违反了Content Security Policy指令，因为在Content Security Policy中，没有配置对应的部分，那么会默认使用default-src指令，而default-src指令中没有设置我们发送请求url设置，因此拒绝访问。

如果要设置允许请求数据的话，则需要设置Content-Security-Policy的connect-src *，意思是可以请求到任何的url

解决

那我的第一反应是在index.html文件中加<meta>标签，代码如下：

<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content: https://xxx.com;media-src * blob: 'self' http://* 'unsafe-inline' 'unsafe-eval';style-src * 'self' 'unsafe-inline';img-src * 'self' data: content:;connect-src * blob:;">

 注意：这里可以根据自己需要修改，例如img-src 允许 * 等多个类型的资源。 connect-src 允许* blob:等类型资源。注意*并不包含blob:类型，如果没有申明blob:可能出错

nginx配置添加 add_header  Content-Security-Policy ，把需要访问的url写进去 ，完成CSP。

总结：

   1. server nginx config配置，增加后, restart nginx

       add_header Content-Security-Policy "img-src 'self' data: https: http:;";

  2.html页面标签更改

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