External File Chrome Extension

Question

I am trying to reference an image in my content script for my extension. I have declared it in my web accessible resources. I am using chrome.extension.getURL(). Not sure what is wrong here. Image is not displaying only alt is.

Here is my manifest file:

{
"manifest_version": 2,
"name": "Test Image",
"description": "",
"version": "1.0",
"content_scripts": [
{
  "matches": ["<all_urls>"],
  "js": ["script.js"],
  "web_accessible_resources":["images/Image.png"]
}
]
}

and here is my javascript

window.onload = function() {
var div = document.createElement("div");
div.innerHTML = '<img alt="image" src="">';
div.src = chrome.extension.getURL("images/image.png");
div.style.visibility = "visible";
div.style.position = "absolute";
div.style.zIndex = "20000";
div.className = "jack";
div.id = "jack";
document.body.appendChild(div);

Answer 1

1: web accessible resources is not a subset of content scripts:

{
  "manifest_version": 2,
  "name": "Test Image",
  "description": "",
  "version": "1.0",
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["script.js"]
  }],
  "web_accessible_resources":["images/Image.png"] 
}

2a: you should set img.src, not div.src. fast solution:

div.firstElementChild.src = chrome.extension...

2b: better way to manipulate HTML DOM:

var img = div.appendChild( document.createElement("img") );
img.setAttribute("alt", "image");
img.setAttribute("src", chrome.extension.getUrl("images/Image.png") );