Angular 2从assets文件夹加载CSS背景图像

Question

我的文件夹结构看起来像

-myapp
    -assets
        -home-page-img
            -header-bg.jpg
    -src
        -app
        -home-page
            -home-page.component.css
            -home-page.component.html
            -home-page.component.ts

在我的home-page.component.css中,我有以下内容

header {
    width: 200px;
    height: 200px;
    background-image: url('/src/assets/home-page-img/header-bg.jpg');
}

My angular-cli.json
    "assets": [
    "assets",
    "favicon.ico"
]

当我运行代码时,我得到了

GET http://localhost:4200/src/assets/home-page-img/header-bg.jpg 404 (Not Found)

出于演示目的,如果我将背景图像更改为以下内容,则会出现完全不同的错误

background-image: url('assets/home-page-img/header-bg.jpg');

./src/app/home-page/home-page.component.css
Module not found: Error: Can't resolve './assets/home-page-img/header-bg.jpg' in '/Users/JohnSmith/Desktop/my-app/src/app/home-page'

如何加载该图像？

Answer 1

尝试 __CODE__

Answer 2

我用它.始终以CSS和HTML"assets /"中的"/ assets /"开头.我没有问题.Angular认识到它.

CSS

.descriptionModal{
    background-image: url("/assets/img/bg-compra.svg");
}

HTML

<img src="assets/img/ic-logoembajador-horizontal.svg" alt="logoEmbajador">

Answer 3

对于background-image: url(/assets/images/foo.png)，我还有一个 i18n + base-href 的问题，最后我找到了一个解决方法。

我的问题是通过以下方式解决的：

background-image: url(~src/assets/images/foo.png) .

图片标签：

<img src="assets/images/foo.jpg" />

Answer 4

@Samuel Ivan 的答案对我不起作用。也许是因为我正在开发一个国际化项目。最后，^帮助我

.descriptionModal{
    background-image: url("^assets/img/bg-compra.svg");
}

答案来自https://github.com/angular/angular-cli/issues/12797

Answer 5

我们可以使用相对路径而不是绝对路径：

.logo{
  background-image: url('assets/home-page-img/header-bg.jpg');
}

或者

.logo{
  background-image: url('~src/assets/home-page-img/header-bg.jpg');
}

Answer 6

揭秘 CSS 文件中资源的 Angular 路径

这没有记录在案，据我所知也没有任何人写过它。

This is true for Angular 11 but has certainly been around for a while.

(Note: setting --base-href or --deploy-url in ng build has no consequence to the following).

The regular way to include assets in a css file, such as:

background-image: url(/assets/someImage.png);

is with a leading slash. During the build prosses (ng serve or ng build), if angular sees that leading slash, It will ignore that path, meaning it will copy it as is. So the browser will see that path '/assets/someImage.png', and will look for that file starting at the root or as we call it domain. (Note: paths in CSS are relative to the location of the CSS file, but even in CSS a leading slash means looking for the file starting form root). Angular assumes you put that file In the default assets folder, who's contents are copied as is to the dist folder, and that sits by default in the root, so someDomain.com/assets/someImage.png just works.

However, if for some reason you are trying to do something else, and you remove that slash, a whole new prosses is happening. For example, lets say you now write

background-image: url(assets/someImage.png);

without the slash. (for example when you deploy your app to an inner folder in a domain 'someDomain.com/some-folder/', and assets is in that folder. With the slash it will look for assets in the root, and it not there, its in some-folder. So you remove the slash thinking that it will also copy that code as is and look for assets from where the css file is, which is what the browser will do).

Surprise! Angular this time does not ignore that file path!! it looks for it during build time!! and it doesn't fine it, and you get that annoying error saying angular can't find that file. So what you do is rewrite that path until angular can find it (in your file system), for example: if your in a deeply nested component

background-image: url(../../../../assets/someImage.png);

And then, boom, it works, but take a look at what happened to your dist folder and to your CSS code. Angular makes two copies of the someImage.png file. One in the regular assets folder and the other in the root, right next to all the js bundles. And in you CSS file

background-image: url(../../../../assets/someImage.png);

will be rewritten to

background-image: url(someImage.png);

This works, but not exactly nice dist folder structure. This behaver is same for global style.css or component style that gets injected to the index.html or shadowRoot (ViewEncapsulation.shadowDom)

(Note: in the html templates there are no checks or rewrites)

Answer 7

每个人都缺少一件事base-href。

2种方式：

1. background-image: url("^assets/img/bg.svg");[长话短说；只需使用这个]

即使它将部署在子目录中而不是（即您指定了默认值之外的其他目录），这也将起作用。rootbase-href/

2. background-image: url("../assets/img/bg.svg");[使用相对路径]

css,scss,sass使用从当前文件到项目文件夹中实际图像的相对路径。如果资产文件夹位于目录树中的上一级，则此操作将起作用。（"../../"对于 2 个级别，依此类推..）使用不同的版本base-href 不适用于此版本。

另外，在build；对于第一种情况，将使用该文件：

dist/app-name/assets/img/bg.svg

对于第二种情况，相同的文件将被复制到该app-name目录并从那里使用（如果您src/assets在构建资产数组中已经有angular.json，则会导致不必要的冗余，在大多数情况下您都会这样做）：

dist/app-name/bg.svg

参考：GH问题