style =＆＃34; background-image无效但img正在工作

Question

我正在使用AngulerJS项目并且未加载

<div class="fill" style="background-image:url('images/header_img1.png')"></div>

但是img标签正在运行。

<img src="images/header_img1.png" class="fill">

你知道为什么背景图像不起作用吗？另外我注意到虽然img tag工作但是填充类没有效果。

我只是因为Anguler JS而徘徊？

Answer 1

似乎问题在于chrome（猜测你正在使用该浏览器）。在这种情况下删除网址周围的引号

<div class="fill" style="background-image:url(images/header_img1.png)"></div>

样本

＆＃13;

＆＃13;

div {
  width: 153px;
  height: 230px;
  border: 1px solid black;
}

＆＃13;

<div style="background-image: url(http://freebigpictures.com/wp-content/uploads/2009/09/trees-forest-153x230.jpg)"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我猜你的div根本没有大小。尝试使用min-height和min-width设置尺寸。

另外，你可以添加一些被检查元素的截图吗？

.fill {
  display: inline-block;
  min-height: 200px;
  min-width: 200px;
  background: #ccc no-repeat center;
  background-size: cover;
}

<div class="fill" style="background-image:url(https://media.giphy.com/media/nNxT5qXR02FOM/giphy.gif)"></div>

Answer 3

在网络标签中检查404响应。

尝试在图片/images/header_img1.png之前添加斜杠，如果绝对网址为http://localhost:3000/images/header_img1.png