javascript - Ajax:Chrome 扩展:PHP 加载图像问题

Question

我尝试从 MySQL 服务器提取镜像，但它总是返回错误。我已经尝试了几个小时来寻找内容安全策略的解决方法，但我无法弄清楚这个。现在图像帧已加载，但图像不会被设置。这是我的代码。

inputImages.php

<?php
    $server_name = "localhost";
    $my_user = ""; //taken out for stackoverflow question
    $my_passcode = ""; //taken out for stackoverflow question
    $db_name = ""; //taken out for stackoverflow question
    $conn = mysqli_connect($server_name, $my_user, $my_passcode, $db_name);
    if (!$conn)
    {
        die("Could not connect");
    }
    else //Hopefully this runs instead  
    {
        try
        {
            $sql_query = mysqli_query($conn, "SELECT * FROM `adDatabase`");
            while ($row = mysqli_fetch_array($sql_query))
            {
                $id = $row['ID'];
                $img = $row['img'];
                $image = '<img src="data:image/png;base64,'.base64_encode( $row['img'] ).'" style="height: 12em; width: 12em" >';
                echo $image;
            }
        }
        catch(Exception $e)
        {
            echo $e;
        }
    }
?>

以及带有ajax请求的js文件

window.onload = function()
{
    $.ajax({
        url: '', //taken out for stackoverflow question
        success: function(data)
        {
            $(".latest-ads").html(data);
        }
    });
}

但是没有加载任何内容，我收到此错误

jquery.js:5873 Refused to load the image 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAkAAAAHkCAYAAADW/5BTAAAYK2lDQ…FCoBAoBAqBQqAQOFIEarf3kTZcsV0IFAKFQCFQCBQCN0fg//rs0Cqe5CYQAAAAAElFTkSuQmCC' because it violates the following Content Security Policy directive: "default-src *". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

我不是在尝试加载脚本。我正在尝试加载图像，但图像未渲染或正在读取。

编辑-评论中请求的 Material -manifest.json

{
    "manifest_version": 2,
    "name": "Smart Lead Advertisment",
    "version": "1.0",
    "description": "Smart Lead Advertisment, helping you advertise in a more effecient way.",
    "author": "Smart Lead Advertisment",
    "browser_action": {
        "default_popup": "html/popup.html",
        "default_title": "Click here"
    },
    "content_scripts": [
        {
            "matches": ["http://*/", "https://*/", "file:///*/"],
            "js": ["js/jquery.js", "js/bootstrap.min.js", "js/ad-injection.js"]
        }
    ]
}

Answer 1

尝试返回base64来自 php 的字符串，创建<img>元素位于 success的$.ajax() ，设置src的<img>至data URI base64 的表示字符串

$(function() {
  // `base64` portion of `data URI` returned from request; e.g., `php`
  var blob = new Blob(["iVBORw0KGgoAAAANSUhEUgAAAH4AAAB2CAYAAAAOcCflAAAABHNCSVQICAgIfAhkiAAAAShJREFUeJzt0UERACAMwLCBf89DBo8mCnrXM7M75NzfAfxhfJTxUcZHGR9lfJTxUcZHGR9lfJTxUcZHGR9lfJTxUcZHGR9lfJTxUcZHGR9lfJTxUcZHGR9lfJTxUcZHGR9lfJTxUcZHGR9lfJTxUcZHGR9lfJTxUcZHGR9lfJTxUcZHGR9lfJTxUcZHGR9lfJTxUcZHGR9lfJTxUcZHGR9lfJTxUcZHGR9lfJTxUcZHGR9lfJTxUcZHGR9lfJTxUcZHGR9lfJTxUcZHGR9lfJTxUcZHGR9lfJTxUcZHGR9lfJTxUcZHGR9lfJTxUcZHGR9lfJTxUcZHGR9lfJTxUcZHGR9lfJTxUcZHGR9lfJTxUcZHGR9lfJTxUcZHGR9lfJTxUcZHGR/1AAkJAuo+1B/zAAAAAElFTkSuQmCC"], {
    type: "text/plain"
  });

  $.ajax({
    url: URL.createObjectURL(blob),
    success: function(data) {
      console.log(data);
      // create `data URI`; e.g.; `data:MIME;base64,` concatenate 
      // `base64` string returned from request
      var img = $("<img>", {
        src: "data:image/png;base64," + data
      });
      $("#latest-ads").html(img)
    }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div id="latest-ads"></div>