Google Chrome 扩展程序 - 无法使用 CSS 加载本地图像 [英] Google Chrome Extensions - Can't load local images with CSS

问题描述

我有一个简单的 Chrome 扩展程序，它使用内容脚本功能来修改网站.更具体地说，该网站的background-image.

I have a simple Chrome extension that uses the content script feature to modify a website. More specifically, the background-image of said website.

出于某种原因，我似乎无法使用本地图像，即使它们已打包在扩展程序中.

For some reason I can't seem to be able to use local images, even though they are packed in the extension.

body {
    background: #000 url('image.jpg') !important;
    background-repeat: repeat !important;
}

就是这样，最简单的 CSS……但它不起作用.浏览器不加载图像.

That's it, the simplest CSS... but it won't work. The browser doesn't load the image.

推荐答案

你的图片 URL 应该看起来像 chrome-extension:///image.jpg

Your image URL should look like chrome-extension://<EXTENSION_ID>/image.jpg

您最好通过 javascript 替换 css.来自文档:

You would be better off replacing css through javascript. From docs:

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

这篇关于Google Chrome 扩展程序 - 无法使用 CSS 加载本地图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！