Angular 5资产路径变量

Posted 2023-03-06

【中文标题】Angular 5资产路径变量

【英文标题】：Angular 5 asset pathing variable

【发布时间】：2018-10-05 12:11:09

【问题描述】：

我有一张将用于各种组件的图片（即徽标）。

我的文件夹结构类似于：

src/
    app/
        component1/
            component1.component.ts
            ...
        component2/
            sub-component1/
                sub-component1.component.ts
                ...
            component2.component.ts
            ...
    assets/
        img/
            logo.jpg
        icons/
    styles.scss

有没有一种简单的方法可以将 assets/img 文件夹的路径存储在 SCSS/SASS 变量中，以便能够访问 logo.jpg 文件，而无需在各个组件中放置不同的相对路径?

我问的原因是我想换出基于主题的图像，这是我从this post here 实现的。当我的项目被编译时，插入到 background-image: url(...) 属性中的变量具有指定的路径，该路径不适用于所有组件。

我可以想象这也会极大地帮助其他场景。

【参考方案1】：

看来 tslint 让我失望了。

在我的主题本身中，我将变量存储为：

$logo-path: url('assets/img/logo.jpg');

但是 tslint 将其突出显示为错误路径，因为它无法相对于主题本身的路径定位图像，因此因为在编译时它将该路径评估为不正确，当它被插入时它评估为 null我实际的组件级样式表。

为了解决这个问题，我在变量中设置了一个路径字符串，并在我的组件级样式表中评估了实际 URL。

$logo-path: 'assets/img/logo.jpg'

在我的组件级样式中：

.class-name
    background-image: url(#$logo-path);

可悲的是，有人回答了我的问题，指出我可以直接使用 assets 文件夹，而我实际上并没有尝试使用 assets 文件夹的直接路径进行构建，假设 tslint 在无效路径下是正确的。答案已被原发帖者删除，所以谢谢你让我走上了正确的道路（是的，这是故意的）。

【参考方案2】：

来自this answer 的可能的其他解决方案：您可以存储资产文件夹的路径：

background: url(#$get-path-to-assets/site/background.jpg) repeat-x fixed 0 0;

然后您可以更改该变量的值。