我正在尝试将js文件中的图像添加到用于Chrome扩展的innerHTML元素中-前端问题

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

本文介绍了我正在尝试将js文件中的图像添加到用于Chrome扩展的innerHTML元素中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

工作中：

<img src="aHR0cHM6Ly90ZXN0LWltZy11cmw=">

不工作：

<img src="aW1hZ2Uvc21pbGUuanBn">

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

所以我在CfCore.js中使用innerHTML：
e.innerHTML='<a href=#> <img src="aW1hZ2VzL3NtaWxlLmpwZw==" 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="JyArIAogICAgY2hyb21lLnJ1bnRpbWUuZ2V0VVJMKA=="images/smile.jpg') + '" id="smile"></a>');

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

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

function expandLocalSrc(html) {
    return html.replace(/src="KFteOg=="]+)"/g, 'src="JyArIGNocm9tZS5ydW50aW1lLmdldFVSTCg="') + '$1"');
}

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

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