Refused to load the image 'blob:<URL>' because it violates the following Content Security Policy directive: "default-src 'self' data: *.xxx.com 'unsafe-inline' 'unsafe-eval' mediastream:". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback. 在vue中如何解决

在 Vue 中，可以通过配置 meta 标签来设置 CSP。在 index.html 文件中，可以添加以下 meta 标签：

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

这个 meta 标签与上面的 CSP 指令等价，将 'blob:' 添加到 'img-src' 中，允许加载 Blob URL 的图片资源。

值得注意的是，如果你的 Vue 项目使用了 webpack，你可以使用 webpack-csp-html-plugin 插件来自动生成 CSP 指令。在 webpack 配置文件中添加以下代码：

const CSPHtmlWebpackPlugin = require('csp-html-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new CSPHtmlWebpackPlugin({
      'default-src': ["'self'", 'data:', '*.xxx.com', "'unsafe-inline'", "'unsafe-eval'", 'mediastream:'],
      'img-src': ['blob:']
    })
  ]
}

这个插件将自动生成 CSP 指令，并将它们添加到 HTML 文件中的 meta 标签中。这样可以方便地管理 CSP，同时确保 CSP 的正确性。