Angular 4 背景 css 引用 URL 图片路径

Question

我一直被试图在我的应用程序中引用图像所困扰。目录结构为：

src/app/assets/images/splashImage.png

在这个微不足道的案例中，我试图从以下位置引用它：

src/app/app.component.html

html的第一行：

 <div class="splashContainer">

CSS 文件：

 .splashContainer {
background: url("../../assets/images/splashImage.png") no-repeat center center fixed;

构建诊断说它无法在 –> 上面的 URL 路径中找到文件。

我的规则显然是错误的，是从存放 html 的文件夹开始计数。 app 是 1，src 是 2，这让我在 assets 文件夹之上。因此这两个 ../ 部分。

我究竟做错了什么？

提前致谢。瑜珈

原文由 Yogi Bear 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

不要使用像 ../dir 或 ../../dir 这样的路径，因为这样的相对路径很可能在构建后在服务器中失败。由于 assets/ 文件夹默认在 angular.json 文件中声明。我建议您仅对图像使用内联 css。例如：

 <div class="bg-div" style="background-image: url(assets/images/imageX.png)"></div>

然后继续你的 css 文件中的其他 css：ie

 .bg-div: {
  background-size: cover;
  background-position: center center;
  height: 100%;
  position: relative;
}

这样，它将在开发期间和部署期间同时适用于本地构建。您不必在构建期间再次更改路径。

这是如果除了主角度的 styles.css 之外还有另一个外部 css 文件

原文由 briancollins081 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

尝试

background: url(assets/images/splashImage.png) no-repeat center center fixed;

原文由 nithalqb 发布，翻译遵循 CC BY-SA 3.0 许可协议