如果使用 Javascript 设置为 div 背景，则图像 URL 不起作用

Question

我正在编写一个简单的应用程序，其中包含包含特殊字符的图像URL。我无法将它们设置为javascript代码中的CSS背景图像。

我怀疑罪魁祸首是 URL 中的特殊字符，但用"\"转义它们似乎并不能解决问题。

所有图片都是从浏览器正确加载的，即使使用 Chrome 开发者工具中的 CSS 编辑器设置为背景属性，它们也能正常工作。

示例代码：[JsFiddle 链接]

(function() {
document.getElementById("bg-btn").addEventListener("click", function() {
var bg_url = document.getElementById("bg-url").value;
document.getElementsByClassName("container")[0].style.backgroundImage = "url(" + bg_url + ")";
});
})();

.container {
max-width: 300px;
height: 300px;
background: #ccc;
background-size: cover;
}

<div class="container"></div>
URL: <input type="text" id="bg-url">
<button id="bg-btn">Change Background</button>

工作映像网址：https://www.spiritdental.com/components/com_easyblog/themes/wireframe/images/placeholder-image.png

不工作的图像网址：https://img.discogs.com/VF4F5JDIXO8v8A_OLZr4Nh03_so=/fit-in/600x520/filters:strip_icc():format(jpeg):mode_rgb():quality(90)/discogs-images/R-6029909-1409248351-4058.jpeg.jpg

编辑：

正如你们中的许多人建议在 url('...'( 表达式中添加单引号一样，解决了这个问题。

但是为什么有些 URL 即使没有单引号也能工作？浏览器是否假定参数是字符串，因为它包含安全字符？

Answer 1

试试这个：-

(function() {
document.getElementById("bg-btn").addEventListener("click", function() {
var bg_url = document.getElementById("bg-url").value;
document.getElementsByClassName("container")[0].style.backgroundImage = "url('" + bg_url + "')";
});
})();

.container {
max-width: 300px;
height: 300px;
background: #ccc;
background-size: cover;
}

<div class="container"></div>
URL: <input type="text" id="bg-url" value="https://img.discogs.com/VF4F5JDIXO8v8A_OLZr4Nh03_so=/fit-in/600x520/filters:strip_icc():format(jpeg):mode_rgb():quality(90)/discogs-images/R-6029909-1409248351-4058.jpeg.jpg">
<button id="bg-btn">Change Background</button>

Answer 2

只需添加单引号：document.getElementsByClassName("container")[0].style.backgroundImage = "url('" + bg_url + "')";

它对我有用。

Answer 3

你可以试试这个：

在bg_url中添加单引号。

像这样：

(function() {
document.getElementById("bg-btn").addEventListener("click", function() {
var bg_url = document.getElementById("bg-url").value;
document.getElementsByClassName("container")[0].style.backgroundImage = "url('" + bg_url + "')";
});
})();

我希望这会对您有所帮助！ ：-(