Question

我正在构建chrome扩展程序，并希望在扩展程序内部将图像（svg）嵌入为base64字符串（由第三方API生成并通过ajax接收）。我得到了字符串本身，但是它无法显示图像，并显示以下错误：“拒绝加载图像'data：image / svg; base64，JVBE .....”，因为它违反了以下内容安全策略指令：” img-src'self'data“。我修改了manifest.json以及index.html中的meta标签，但没有运气。

manifest.json

{
    "manifest_version": 2,
    "name": "test",
    "description": "test",
    "version": "1.0.0",
    "icons" : {"128": "test_128.png"},
    "browser_action":
        {
           "default_popup": "index.html",
           "default_icon": "test_main.png"
        },
    // "content_scripts": [{
    //  "js": ["jquery.min.js"]
    // "matches": ["http://*/*", "https://*/*"]
   //}],
    "content_security_policy": "img-src 'self' data; script-src 'self'; object-src 'self'",
    "permissions": ["activeTab"]
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!--<meta charset="utf-8" >-->
    <meta http-equiv="Content-Security-Policy" content="default-src *;
       img-src * 'self' data: http:; script-src 'self' 'unsafe-inline'
       'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">
    <title>chrome</title>
    <link rel="stylesheet" type="text/css" href="main.css">
  </head>
  <body>
    <div id="app"></div>
    <script src="jquery.min.js"></script>
    <script src="/dist/build.js"></script>
  </body>
</html>

App.vue

<template>
    <img :src ="image_link"/>      
</template>

我使用Vue.js构建扩展。任何有关如何修复的评论和建议都值得赞赏。

如何在chrome扩展中将图像作为base64字符串嵌入

0 个答案: