当 ng 服务 Angular 应用程序时，不考虑在组件 css 中配置的背景图像的相对路径

Posted 2023-03-07

【中文标题】当 ng 服务 Angular 应用程序时，不考虑在组件 css 中配置的背景图像的相对路径

【英文标题】：Relative path is not considered for background image configured in component css when ng serve Angular app

【发布时间】：2019-07-23 15:33:10

【问题描述】：

我有两个div id div1 和div2，我需要为它们设置两个不同的背景图片，图片名称相同但位于不同的文件夹中，所以我配置如下，

app.component.html：

<div id="div1"></div>
<div id="div2"></div>

app.component.css：

background-image 每个div 的路径不同。

#div1 
  background-image: url('../assets/images/videos/back.jpg');
  /* other styles */


#div2 
  background-image: url('../assets/images/blogs/back.jpg');
   /* other styles */

问题：

当我使用 ng serve 为应用程序提供服务时，两个 div 都显示相同的背景图像。

请注意两张图片的路径不同但名称相同

原因：

在浏览器的开发者工具中查看时，样式如下，

#div1 [_ngcontent-c0] 
    background-image: url(back.jpg);
    /* other styles */


#div2 [_ngcontent-c0] 
        background-image: url(back.jpg);
        /* other styles */

这不是url('../assets/images/blogs/back.jpg')，而是url(back.jpg) - 没有相对路径，因此两者都在背景中显示相同的图像。

问题：

这是 angular 的预期行为吗？如果不是，我在这里想念什么？

【问题讨论】：

可以用背景属性试试吗？

您可以构建您的应用并检查 dist 文件夹中的内容吗？

@FatemeFazli 与背景属性相同。

@AmirArb*** ，在构建时它会在根目录中以新名称创建每个文件的副本。所以它工作正常 - 仍然不是使用原始文件，而是它的副本

【参考方案1】：

CSS 中的相对路径应该相对于基本 URL，而不是相对于 src 目录中的组件。因此，请从路径中删除前导 ..，但请确保您有前导斜杠：

#div1 
  background-image: url('/assets/images/videos/back.jpg');


#div2 
  background-image: url('/assets/images/blogs/back.jpg');

根据实验，我可以看到，当使用相对于源代码的路径时，CLI 会创建引用图像的副本并将其放在dist 文件夹的根目录中。这会导致dist 文件夹如下所示：

/dist
  // This is the image that the CLI created 
  // and your component is referencing, but 
  // you want to reference the images in the
  // assets folder.
  back.jpg
  /assets
      /images
          /videos
              back.jpg
          /blogs
              back.jpg

【讨论】：

相对于基本 URL 的路径工作正常。就像你说的那样，CLI 在根目录中创建了一个副本，构建也将文件重命名为唯一的名称，所以它不会产生任何问题也是。但此问题仅在与ng serve 一起使用时才会出现。所以要么它应该强制使用与基本 URL 相关的路径，还是它与 build 和 ng serve 一起工作，对吗？是不是很奇怪？

如果存在重复的资产文件名（不同的内容/图像），则使用 relative 会出现问题，它们会在根目录中相互覆盖，并且哪一个胜出不一致。这是我的经验。

【参考方案2】：

我必须为我的工作做一个内联样式

<section id="hero" style="background-image: url(./assets/pic.jpg)">