Jak załadować obraz (i inne zasoby) w projekcie Angular 2?

Jestem całkiem nowy w Angular, więc nie jestem pewien, jaką najlepszą praktykę to zrobić.Jak załadować obraz (i inne zasoby) w projekcie Angular 2?

Do wygenerowania nowej aplikacji użyłem funkcji kątowej-cli i ng new some-project.

W nim utworzony folder "images" w folderze "aktywa", więc teraz mój folder zdjęć jest src/assets/images

W app.component.html (który jest źródłem mojego wniosku), kładę

<img class="img-responsive" src="assets/images/myimage.png">

Gdy wykonuję ng serve, aby wyświetlić moją aplikację internetową, obraz nie jest wyświetlany.

Jaka jest najlepsza praktyka ładowania obrazów w aplikacji Angular?

EDYCJA: Zobacz odpowiedź poniżej. Moja obecna nazwa obrazu używała spacji, której Angular nie lubił. Po usunięciu spacji w nazwie pliku obraz wyświetlany jest poprawnie.

Źródło

2017-03-14 user3183717

tak masz rację, dałeś poprawnej składni ścieżki z aktywów fodler, może być problem z nazwą niedopasowanie sprawdzić, czy obraz jest obecny lub nie –

pewno nie jest to nazwa niedopasowanie, w końcu utworzyłem folder 'public' poza' src' i wyświetlałem obraz z '' – user3183717

Naprawiono to. Moja obecna nazwa pliku obrazu zawierała spacje i z jakiegokolwiek powodu Angular tego nie lubił. Kiedy usunąłem spacje z mojej nazwy pliku, działało 'assets/images/myimage.png'. – user3183717

Naprawiłem to. Moja obecna nazwa pliku obrazu zawierała spacje i z jakiegokolwiek powodu Angular tego nie lubił. Kiedy usunąłem spacje z mojego pliku, zadziałało assets/images/myimage.png.

Źródło

2017-03-14 18:15:41 user3183717

Zwykle "aplikacja" jest źródłem Twojej aplikacji - czy próbowałeś app/path/to/assets/img.png?

Źródło

2017-03-14 18:01:16 chrispy

angle-cli umieść foldery 'app' i' assets' osobno w folderze 'src'. (przepraszam Nie jestem pewien, jak mam sformatować strukturę folderów i nazwy) – user3183717

w moim projekcie używam następującą składnię w moim app.component.html:

<img src="assets/img/1.jpg" alt="image">

lub

<img src='http://mruanova.com/img/1.jpg' alt='image'>

użycie [źródło] jako wyrażenie szablonu kiedy są wiążące właściwość przy użyciu interpolacji

<img [src]="imagePath" />

jest jak poniżej:

<img src={{imagePath}} />

Źródło: how to bind img src in angular 2 in ngFor?

Źródło

2017-08-26 16:44:00 mruanova

Używasz ścieżki względnej. Czy można użyć ścieżki bezwzględnej? – Halil

Tak, zredagowałem moją odpowiedź. – mruanova

to Twój app.component.html i folder zasobów na tym samym poziomie? – Halil

Będąc specyficzne Angular2 do 5, możemy powiązać ścieżkę obrazu za pomocą wiązania jak poniżej własności. Ścieżka obrazu jest ujęta w pojedyncze znaki cudzysłowu.

przykład próbki

<img [src]="'assets/img/klogo.png'" alt="image">

Źródło

2017-11-12 03:54:21

Jaka jest różnica między src = "assets/img/klogo.png" a [src] = "" assets/img/klogo.png ""? – gdbj

@ gdbj tutaj jest odpowiedź https://stackoverflow.com/questions/41426974/whats-better-to-use-in-angular-src-or-src –

, więc w zasadzie używamy [src] do wiązania z modelem jeśli chcemy mieć możliwość zmiany src przy użyciu tej metody. – gdbj

Jak załadować obraz (i inne zasoby) w projekcie Angular 2?

Odpowiedz

Powiązane problemy