我想用javascript从css url中获取图像，这样我就可以设置背景图像的样式。

Question

我想从CSS URL获取一个使用javascript的图像，这样我就可以用背景大小:封面和颜色设置背景图像的样式。该代码用于使用Javascript进行简单的快速图像加载

​

var image = document.images[0]
var bigImage = document.createElement("img")
   bigImage.onload = function () {
    image.src = this.src
}
setTimeout(function () {
    bigImage.src = "img/large.jpg";
}, 50)

.header-image {
  padding: 200px 100px;
  background-color: #eee;
  background-size: cover;  
  height: 75vh; 
}

<img id="image" class="header-image" src="img/small.jpg" width="1200" />

​

Answer 1

<img>的src实际上是<img>的前台内容(如here所解释的)。因此，如果您设置了<img>的background-image以及src，则src将覆盖background-image。

在这种情况下，我建议您只设置<div>的background-image。

​

var url = "https://images-na.ssl-images-amazon.com/images/I/51IwmuOPQyL._SL1052_.jpg";
var element = document.querySelector('.example');
element.style.backgroundImage = "url(" + url + ")";

.example {
  width: 100px;
  height: 100px;
  
  background-color: black;
  background-size: cover;
}

<div class="example"></div>

​