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，这使我位于资产文件夹上方。因此，这两个../部分。

我究竟做错了什么？

提前致谢。瑜伽士

Answer 1

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

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

然后继续使用 css 文件中的其他 css：即

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

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

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

Answer 2

尝试

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