Ajax: Chome extension: PHP Issueloading images

Question

I tried pulling an image from a MySQL server and it is always returning an error. I have tried for hours to find work arounds for Content Security Policies but I cant figure out this one. Now the image frames get loaded but the image would not be set. Here is my code.

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;
        }
    }
?>

And the js file with ajax request

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

But nothing loads and I get this error

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.

I am NOT trying to load a script. I am trying to load an image but the image is not rendering or being read.

EDIT - material requested within the comments - 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

Try returning the base64 string from php, creating <img> element at success of $.ajax(), setting src of <img> to data URI representation of base64 string

$(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>