How can I use chrome.extension.geturl() method in HTML tags?

Question

I want to load a local image from extension. I write the following code to load image. But it can not load image.

$('.aAU').append('<div id="DivScroll"><img id="imgSlider" width="25px" src=chrome.extension.getURL("images/slider.png") /></div>');

The file is also present at that location.

When I use developer tool it shows img tag as follows

<img id="imgSlider" src="chrome.extension.getURL('images/slider.png')">

If I use static path such as follows then it display the image

<img id="imgSlider" src="chrome-extension://ccpdgakpdgiklccnpnihmidbjnacgkch/images/slider.png">

provide any solution to use chrome.extension.getURL() method in HTML tags.

Answer 1

Are your resources registered in manifest file as shown here

{
  ...
"web_accessible_resources": [
    "images/my-awesome-image1.png",
    "images/my-amazing-icon1.png",
    "style/double-rainbow.css",
    "script/double-rainbow.js"
  ],
  ...
}

These resources would then be available in a webpage via the URL chrome-extension://[PACKAGE ID]/[PATH], which can be generated with the chrome.extension.getURL method.

Did you try to set src to following code through Java Script instead of

<img id="imgSlider" src="chrome.extension.getURL('images/slider.png')">