내 응용 프로그램 구조에서 상대 경로의 자원을 찾는 방법과 같은 것입니다 :는 각도
index.html
main.ts
app
|--main.component.html
|--main.component.ts
|--app.module.ts
|--note.png
... etc
내가 같은 폴더 아래 main.component.html에서 note.png을 사용하고 싶습니다. <img src="note.png"/>과 <img src="./note.png"/>을 시도했지만 그림이 표시되지 않습니다. 브라우저는 /note.png으로 이동하여 그림을 검색합니다.
상대 경로를 사용하여 리소스를 찾는 좋은 방법이 있습니까?
다른 폴더에 여러 페이지가있을 수 있으므로 기본 href가 다르기 때문에 사용할 수 없습니다.
Angular CLI를 사용하는 경우 원하는 폴더에 자산을 넣을 수 있습니다. 그냥 여기에 당신의 .angular-cli.json 파일에 해당 폴더를 추가해야합니다 : 당신은 IMG 폴더에있는 이미지의 일부를 원하는 경우에 따라서
"assets": [
"assets",
"favicon.ico"
],
, 당신은 다음과 같이 수정할 것 :
"assets": [
"assets",
"img",
"favicon.ico"
],
희망이 도움이됩니다.
대단히 고맙지 만 이미지를 사용하는 ts와 html이있는 같은 폴더에 내 이미지를 넣고 싶다. 나는 모든 페이지의 모든 그림을 저장하는 asserts 폴더를 만들고 싶지 않다. – HalfLegend
나는 어디에서나 자산을 얻기 위해 webpack을 구성 할 수 있다고 믿지만, 그것은 끔찍하다. 자산을 사용하고 올바르게 구성하면됩니다. 구성 요소 당 1 개의 폴더 예를 들어. – gyc
각도가 일반 html 구조와 다릅니다. 정상적인 html에서는 main.component.html을 방문하면 url은 /app/main.component.html과 같습니다. 따라서 html에서 상대 경로를 사용하면 /app/note.png로 이동합니다. 그러나 Angular에서 url은 /index.html이지만 실제로는 main.component.html의 페이지가 표시됩니다. 이 문제를 해결할 방법이 있습니까? – HalfLegend
당신은 ng-src –
해야합니까 내 대답은 귀하의 문제를 해결하지 않습니까? –