为什么Chrome扩展程序加载不了SVG？

Question

我正在使用Chrome扩展程序将一些HTML注入到网站中。 在该代码中，我包含了一个SVG。 但是当我加载网站时，我会遇到。

Failed to load resource: the server responded with a status of 404 (Not Found) http://stackoverflow.com/questions/SVG/home-outline.svg

我所有的svg文件都在名为SVG的文件夹中。我正在使用"web_accessible_resources": ["SVG/*.svg"]加载svg文件，就像我加载其他文件一样。为什么我的图像无法加载？

<span class="menu_T">
    <button class="large_menu_button_T">
        <img src="SVG/home-outline.svg">
    </button>
</span>

当我尝试通过CSS背景添加SVG时，我得到了相同的结果。

- EasilyBaffled

Answer 1

在注入的代码中，类似"SVG/home-outline.svg"这样的相对路径指向您正在注入的站点。

您需要在扩展中使用完整路径来引用资源。获取它很容易：chrome.runtime.getURL("SVG/home-outline.svg")就能完成任务。

- Xan