Angular 2 자산 폴더에서 CSS 배경 이미지 로드

Angular 2 자산 폴더에서 CSS 배경 이미지 로드

내 폴더 구조는 다음과 같습니다.

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

내 홈페이지.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'

이미지를 로드하려면 어떻게 해야 합니까?

사용합니다.항상 CSS의 "/assets/"와 HTML "assets/"로 시작합니다.그리고 저는 아무 문제가 없습니다.각도가 인식합니다.

CSS

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

HTML

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

해라

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

위해서background-image: url(/assets/images/foo.png)i18n+base-href에 또 다른 문제가 있어서 해결 방법을 찾았습니다.

제 문제는 다음을 통해 해결되었습니다.

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

이미지 태그:

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

CSS 파일의 리소스에 대한 각도 경로를 확인하는 중

이것은 문서화되어 있지도 않고 제가 아는 한 누구도 그것에 대해 쓰지 않았습니다.

이것은 Angular 11에 해당하지만 확실히 한동안 존재했습니다.

(참고: --base-href 또는 --deploy-urling 빌드 설정은 다음과 같은 결과를 초래하지 않습니다.)

CSS 파일에 자산을 포함하는 일반적인 방법은 다음과 같습니다.

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

는 선행 슬래시를 사용합니다.빌드 프로세스(ng server 또는 ng build) 중에 각이 선행 슬래시를 보면 해당 경로를 무시하고 그대로 복사합니다.따라서 브라우저는 '/assets/someImage.png' 경로를 확인하고 루트 또는 도메인에서 시작하는 파일을 찾습니다.(참고: CSS의 경로는 CSS 파일의 위치에 상대적이지만, CSS에서도 선행 슬래시는 루트 형식의 파일을 찾는 것을 의미합니다.)Angular는 기본 자산 폴더에 해당 파일을 저장하고, 사용자의 내용이 그대로 dist 폴더에 복사되며, 기본적으로 루트에 있으므로 someDomain.com/assets/someImage.png 은 그냥 작동한다고 가정합니다.

그러나 어떤 이유로 인해 다른 작업을 시도하다가 슬래시를 제거하면 완전히 새로운 프로세스가 발생합니다.예를 들어, 당신이 지금 글을 쓴다고 하자.

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

슬래시 없이 .(예를 들어 도메인 'someDomain.com/some-folder/', 의 내부 폴더에 앱을 배포하고 해당 폴더에 자산이 있는 경우)슬래시를 사용하여 루트에서 자산을 찾고, 루트에 없는 일부 폴더에서 자산을 찾습니다.따라서 슬래시를 제거하면 코드도 그대로 복사하고 CSS 파일이 있는 위치에서 자산을 찾습니다. 이것이 브라우저가 수행할 작업입니다.)

깜짝!이번에는 각도가 해당 파일 경로를 무시하지 않습니다!!빌드 시간 동안 이를 찾습니다!!그리고 그것은 문제가 되지 않고 각진 파일을 찾을 수 없다는 짜증나는 오류가 발생합니다.따라서 각이 파일 시스템에서 찾을 수 있을 때까지 경로를 다시 작성합니다. 예를 들어, 깊이 중첩된 구성 요소에 있는 경우

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

그리고 나서, 쾅, 작동합니다. 하지만 당신의 dist 폴더와 당신의 CSS 코드에 무슨 일이 일어났는지 보세요.Angular는 someImage.png 파일의 복사본을 두 개 만듭니다.하나는 일반 자산 폴더에 있고 다른 하나는 모든 js 번들 바로 옆에 있는 루트에 있습니다.그리고 당신의 CSS 파일에서.

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

로 다시 작성됩니다.

background-image: url(someImage.png);

이것은 작동하지만, 정확하게 좋은 dist 폴더 구조는 아닙니다.이 동작은 index.html 또는 shadowRoot(ViewEncapsulation)에 주입되는 globalstyle.css 또는 구성 요소 스타일과 동일합니다.섀도 돔)

(참고: HTML 템플릿에는 확인 또는 다시 쓰기가 없습니다.)

절대 경로 대신 상대 경로를 사용할 수 있습니다.

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

또는

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

@사무엘 이반의 대답은 저에게 통하지 않습니다.아마도 제가 국제화 프로젝트를 개발하고 있기 때문일 것입니다.마막에지.^를 도와주세요.

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

그 해답은 https://github.com/angular/angular-cli/issues/12797 에서 찾을 수 있습니다.

다들 한 요 ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠbase-href.

2가지 방법:

1. background-image: url("^assets/img/bg.svg"); 이것을 TLDR; 그냥 이것을 사용하세요]

이 기능은 다음과 같은 하위 디렉터리에 배포되는 경우에도 작동합니다.root(즉, 사용자가 지정한 경우base-href인 " 채불행이의외" 의 값/).

2. background-image: url("../assets/img/bg.svg"); 경로 상대 경로 사용]

상경사의 상대 css,scss,sass프로젝트 폴더의 실제 이미지에 파일을 저장합니다.자산 폴더가 디렉터리 트리에서 1단계 위에 있는 경우 이 기능이 작동합니다."../../" 2단계 하기..base-href 이 파일에서는 작동하지 않습니다.

에.build은 첫 됩니다: " 파일은첫번경사우용다니됩에째이다▁for니사▁will"

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

두 ▁the▁over▁to다▁and로 됩니다.app-name및 가지고 합니다.)src/assets의 빌드 angular.json대부분의 경우 이를 수행합니다.):

dist/app-name/bg.svg

참조: GH 이슈

다음을 사용해 보십시오.

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

Angular 9+ 이것은 나에게 효과가 있습니다.

.main-bg{
  background-image: url("src/assets/main-bg.png");
}

제 문제는 다음을 통해 해결되었습니다.

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

Hieu Tran AGI도 마찬가지입니다.

파일 경로로 수정해야 합니다.내 문제는 해결되었습니다.

background-image: url('../assets/img/logo.jpg')

언급URL : https://stackoverflow.com/questions/42802431/angular-2-load-css-background-image-from-assets-folder