从内容脚本引用时，来自扩展名的图像显示为断开的链接

问题描述

我为Chrome插件编写了一个小内容脚本，该插件在网页中插入图片，但当我观看处理后的网页时，图片显示为链接已损坏。

该图片是我的Chrome扩展程序的根。我使用扩展API中的getURL函数：

  $（'< div class =my-image> < img src ='+ 
 chrome.extension.getURL（icon16.png）+ 
'/>这是我的图片< / div>'）; 
  

当我检查网页时，我看到网址是：

 < img src =chrome-extension：//cemgjkpboohlaaccmholgleljodgecod/icon16.png> 
  

我无法弄清楚我做错了什么。请帮助我，我卡住了，并且无能为力。

编辑：注意：链接确实是正确的，因为当我点击在新标签中打开图像时，图标是正确显示。

解决方案

这是什么答案？ 使用旧货单和你很好走，当然使用最新的！
旧的是旧的。这是贬值。

阅读文档：

您可以使用扩展程序的文件与清单2。

  //代码显示< extensionDir> /images/myimage.png：
 var imgURL = chrome.extension.getURL（images / myimage。 PNG）; 
 document.getElementById（someImage）。src = imgURL; 
  

您还必须将图片添加到web_accessible_resources，以便使用外部扩展程序。内容脚本将其插入某用户的网站：

manifest.json：

  {
 ... 
web_accessible_resources：[
images / *。png，
style / double-rainbow.css，
 script / double-rainbow.js，
script / main.js，
templates / *
，
 ... 
} 
  

I wrote a small content-script for a Chrome extension which inserts an image in a webpage, but when I watch a processed webpage the image appears as if the link was broken.

The image is at the root of my Chrome extension. I am using the getURL function from the extension API:

$('<div class="my-image"><img src=' +
    chrome.extension.getURL("icon16.png") +
    ' />This is my image</div>');

When I inspect the webpage, I see that the URL is:

<img src="chrome-extension://cemgjkpboohlaaccmholgleljodgecod/icon16.png">

I can't figure out what I did wrong. Please help me, I am stuck and clueless.

EDIT: Note: the link is indeed correct because when I click on "Open Image in New Tab", the icon is displayed correctly.

解决方案

What kind of answer is that? "use old manifest and you are good to go", of course use newest! Old is old. It's depreciated.

Read documentation: https://developer.chrome.com/extensions/content_scripts#extension-files

you can use extension's files with manifest 2.

//Code for displaying <extensionDir>/images/myimage.png:
var imgURL = chrome.extension.getURL("images/myimage.png");
document.getElementById("someImage").src = imgURL;

also you have to add your images to web_accessible_resources, that you are going to use outside extension, e.g. content script inserts it into some user's website:https://developer.chrome.com/extensions/manifest/web_accessible_resources

manifest.json:

{
  ...
  "web_accessible_resources": [
    "images/*.png",
    "style/double-rainbow.css",
    "script/double-rainbow.js",
    "script/main.js",
    "templates/*"
  ],
  ...
}

这篇关于从内容脚本引用时，来自扩展名的图像显示为断开的链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！