logo标签列表

Angular 4+背景CSS参考URL图像路径

htmlcssangularimagebackground
6

我总是被尝试从我的应用程序中引用图像所困扰。 目录结构如下：

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

SCSS文件位于哪里？ - Tobias
Scss与html位于同一位置。 :-) - Yogi Bear
然后尝试使用"./assets/images/splashImage.png"作为背景图片的位置。 - Tobias
./src/app/app.component.scss 中的错误 模块未找到：错误：无法解析 'D：\ Solution Hunter Engineering \ Active Development \ Hunter2 \ src \ app' 中的 './assets/Images/SolutionHunter Splash Image.png' - Yogi Bear
4个回答
7

尝试

background: url(assets/images/splashImage.png) no-repeat center center fixed;
我尝试了： background: url("assets/Images/SolutionHunter Splash Image.png") no-repeat center center fixed; 并得到以下错误： ERROR in ./src/app/app.component.scss Module not found: Error: Can't resolve './assets/Images/SolutionHunter Splash Image.png' in 'D:\Solution Hunter Engineering\Active Development\Hunter2\src\app' resolve './assets/Images/SolutionHunter Splash Image.png' in 'D:\Solution Hunter Engineering\Active Development\Hunter2\src\app' using description file: D:\Solution Hunter Engineering\Active Development\Hunter2\package.json (relative path: ./src/app) - Yogi Bear
在这里的图片后面，解决方案猎人是什么？ assets/Images/SolutionHunter. 这个图片文件名是splashImage.png，对吗？ - nithalqb
大师，你找到了解决方案。但我有一个建议，我认为最好使用没有空格的图像文件名。从你的回答中我理解你有一个名为“SolutionHunter Splash Image.png”的图像文件，而且它应该可以在background: url(assets/images/yourfilename.png)中使用，因为这对我有效。谢谢。 - nithalqb
6

不要使用像../dir或../../dir这样的路径，因为这样的相对路径在构建后很可能会失败。由于assets/文件夹在angular.json文件中已经被默认声明，我建议你只针对图像使用内联css。

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

然后继续处理css文件中的其他样式，例如：

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

这样做可以同时适用于开发过程中的本地构建和部署。您不需要再次更改构建期间的路径。

如果您有另一个外部CSS文件，除了angular主要的styles.css文件，则是这种情况。

1
感谢您的所有帮助。我找到了答案。 首先，我的路径“公式”是错误的。我应该从包含文件夹的父文件夹开始计数。所以在这种情况下：应用程序包含HTML、SCSS，所以我不计算它。然而，它的父级Src是1，它在assets上方。所以路径是../assets等，在这一点上WebStorm对路径满意，但文件名不满意。 因此，我去掉了路径中的%20，并用空格替换了它们。 因此：

background: url("../assets/Images/SolutionHunter Splash Image.png") no-repeat center center fixed;

这个有效。

感谢您的协助。

Yogi

4
文件名中不应使用空格，否则可能会导致问题。建议您将图像名称更改为solutionHunterSplashImage.png。 - Tobias
我同意，会做的。谢谢。 - Yogi Bear
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接