Button 的嵌入式背景在网页上不起作用？

Posted 2023-02-22

【中文标题】Button 的嵌入式背景在网页上不起作用？

【英文标题】：Button's embedded background doesn't work on webpage?

【发布时间】：2022-01-05 18:13:01

【问题描述】：

我正在用 javascript 创建一个按钮并将其附加到 html 页面

let dropDownButton = document.createElement('button');
dropDownButton.style.background = "url(/48.png)";
  dropDownButton.style.width = size+"px";
  dropDownButton.style.height = size+"px";
  given.append(dropDownButton);

48.png 是我想要嵌入的本地文件。 目前，此代码适用于我声明的HTML 页面（在清单中创建和声明），但它不适用于webpage（例如twitter，最后一个空按钮是我附加的那个）。

为什么会这样？我可以修复它还是直接在按钮内插入img 元素？

【问题讨论】：

您将图片网址设置为/48.png。我假设它正在寻找https://twitter.com/48.png。检查网络标签。

嗯，我检查了网络选项卡，它被标记为 48.png 为 text/html 类型，打开它时确实会转到 Twitter 页面，是的。我曾经使用url(48.png)，但这在HTML页面中不起作用，但url(/48.png)（因为js文件在另一个文件夹中）。有没有办法解决这个问题？

【参考方案1】：

等等，我修好了。 只需硬编码chrome.runtime.getURL 方法即可将本地文件转换为url() 的语法

所以不是

dropDownButton.style.background = "url(48.png)";

使用

dropDownButton.style.background = "url("+chrome.runtime.getURL('48.png')+")";