我正在尝试将js文件中的图像添加到用于Chrome扩展的innerHTML元素中 [英] I'm trying to add image in js file within innerHTML element for Chrome extension

问题描述

当我使用联机链接时，它可以工作，但当我指定本地路径时，它不会加载。

工作中：

<img src="https://test-img-url">

不工作：

<img src="image/smile.jpg">

文件：
--Chrome | |-----manifeset.json |-----core | |--- CfCore.js |--- images | |---smile.jpg

所以我在CfCore.js中使用innerHTML：
e.innerHTML='<a href=#> <img src="images/smile.jpg" id="smile"> </a>'

也在我尝试的清单文件中：
"web_accessible_resources":["images/smile.jpg"]

我发现有人建议在清单文件中使用Chrome：//扩展名、Web_Accessible_Resources，但我不觉得这有什么帮助，我应该如何在js文件中进行编码。

推荐答案

"web_accessible_resources"清单中的json是必需的。

然后在代码中使用chrome.runtime.getURL：

e.innerHTML = '<a href=#><img src="' + 
    chrome.runtime.getURL('images/smile.jpg') + '" id="smile"></a>');

或使用简单的regexp replace自动在相对源链接中插入chrome.runtime.getURL：

e.innerHTML = expandLocalSrc('<a href=#><img src="images/smile.jpg" id="smile"></a>');

function expandLocalSrc(html) {
    return html.replace(/src="([^:"]+)"/g, 'src="' + chrome.runtime.getURL('') + '$1"');
}

P.S.链接是相对于清单.json的，因此根据您的问题，它是core/images/smile.jpg或简单地移出images目录。

这篇关于我正在尝试将js文件中的图像添加到用于Chrome扩展的innerHTML元素中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！