我正在使用包含特殊字符的图像URL编写一个简单的应用程序。我无法通过javascript代码将其设置为CSS背景图像。
我怀疑罪魁祸首是URL中的特殊字符，但是用“ \”转义它们似乎无法解决问题。
所有图像均已从浏览器正确加载，即使使用Chrome开发者工具中的CSS编辑器将其设置为背景属性，它们也可以正常工作。
示例代码：[JsFiddle Link]
(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即使没有单引号也能工作？浏览器是否因为包含安全字符而假定参数为字符串？
最佳答案
尝试这个：-
(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>