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

Jestem całkiem nowy w Angular, więc nie jestem pewien, jaka jest najlepsza praktyka, aby to zrobić.

Użyłem angular-cli i ng new some-projectwygenerowałem nową aplikację.

W nim utworzono folder „images” w folderze „asset”, więc teraz jest folder „obrazy” src/assets/images

W app.component.html(który jest katalogiem głównym mojej aplikacji) umieściłem

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

Kiedy robię, ng serveaby wyświetlić moją aplikację internetową, obraz się nie wyświetla.

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

EDYCJA: Zobacz odpowiedź poniżej. Moja rzeczywista nazwa obrazu zawierała spacje, które Angular nie lubił. Kiedy usunąłem spacje w nazwie pliku, obraz był wyświetlany poprawnie.

Naprawiłem to. Moja rzeczywista nazwa pliku obrazu zawierała spacje iz jakiegoś powodu Angularowi się to nie podobało. Kiedy usunąłem spacje z mojej nazwy pliku, assets/images/myimage.pngzadziałało.

W moim projekcie używam następującej 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żyj [src] jako wyrażenia szablonowego, gdy wiążesz właściwość za pomocą interpolacji:

<img [src]="imagePath" />

jest taki sam jak:

<img src={{imagePath}} />

Źródło: jak powiązać img src w kątowej 2 w ngFor?

Angular-cli domyślnie dołącza folder zasobów do opcji kompilacji. Ten problem pojawia się, gdy nazwa moich obrazów zawiera spacje lub myślniki. Na przykład :

• „my-image-name.png” powinno mieć wartość „myImageName.png”
• „my image name.png” powinno mieć wartość „myImageName.png”

Jeśli umieścisz obraz w folderze asset / img, ten wiersz kodu powinien działać w twoich szablonach:

<img alt="My image name" src="./assets/img/myImageName.png">

Jeśli problem nadal występuje, po prostu sprawdź, czy plik konfiguracyjny Angular-cli i upewnij się, że folder zasobów został dodany w opcjach kompilacji.

Będąc specyficznymi dla Angular2 do 5, możemy powiązać ścieżkę obrazu za pomocą powiązania właściwości, jak poniżej. Ścieżka obrazu jest ujęta w pojedyncze cudzysłowy.

Przykładowy przykład

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

Zwykle „aplikacja” jest katalogiem głównym aplikacji - czy próbowałeś app/path/to/assets/img.png?

1. Dodaj tę linię na górze komponentu.

declare var require: any

2. dodaj tę linię do swojej klasy komponentów.

imgname= require("../images/imgname.png");

3. dodaj tę 'imgname' w tagu img src na stronie html.

   <img src={{imgname}} alt="">

dla mnie „ja” było kapitałem w kategorii „Obrazy”. co również nie podobało się angular-cli. więc rozróżniana jest wielkość liter.

Jest to zawsze zależne od miejsca, w którym znajduje się plik HTML, który odnosi się do ścieżki zasobu statycznego (w tym przypadku obrazu).

Przykład A:

src
|__assests
   |__images
      |__myimage.png
|__yourmodule
   |__yourpage.html

Jak widać, yourpage.html jest o jeden folder od katalogu głównego (folder src), z tego powodu potrzebuje jednej ilości ../, aby wrócić do katalogu głównego, a następnie możesz przejść do obrazu z katalogu głównego:

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

Przykład B:

src
|__assests
   |__images
      |__myimage.png
|__yourmodule
   |__yoursubmodule
      |__yourpage.html

Tutaj musisz przejść do drzewa według 2 folderów:

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