css - 以 Angular 使用图像

Question

我将图像存储在 Assets 文件夹内的图像文件夹中

app 
  -app.component.css
assets
  -images
     -some-image.png

我试图在 background-image 中的 css 中获取图像，但我认为我遇到了与路径相关的问题，因为我似乎无法带来图像。

background-image:  url(../../../assets/images/some-image.png) no-repeat center top;

帮助将不胜感激。

Answer 1

尝试添加如下样式以及宽度和高度。此外，隔离背景重复和背景位置。它会起作用。

  background-image:  url(../assets/images/some-image.png);
  background-repeat: no-repeat;
  background-position: center-top;
  width: 100%; // any width
  height: 230px; // any height

为了让它看起来更好，你可以添加，

background-size: contain;

更新:

图片没有宽高不显示的原因，默认情况下，div 的高度为 0，因为没有内部元素。但是，它的默认宽度已经是 100%。因此，当我们使用 CSS 背景图像属性添加图像时，我们必须添加高度属性。