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


108

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.


1
tak, masz rację, podałeś poprawną składnię ścieżki z narzędzia do zarządzania zasobami, możesz mieć problem z niezgodnością nazwy, sprawdź, czy obraz jest obecny, czy nie
Pardeep Jain

1
Zdecydowanie nie jest to niezgodność nazwy, skończyło się na utworzeniu publicfolderu poza srci wyświetleniu obrazu z<img class="img-responsive" src="../../public/images/myimage.png">
user3183717

Naprawione. 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.
user3183717

1
dobrze :) btw nie ma potrzeby tworzenia dodatkowego folderu publicznego w zaktualizowanym cli mają już takie same nazwy asstes.
Pardeep Jain

Mam podobny problem z plikami o innych rozszerzeniach (np. .sgf) Chcę hostować te pliki i linkować do nich z aplikacji, ale najwyraźniej samo umieszczenie ich w assetsfolderze nie wystarczy. Jakieś pomysły ?
bvdb

Odpowiedzi:


73

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.


62

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?


1
czy twój app.component.html i folder asset są na tym samym poziomie?
Halil

Nie, struktura folderów jest tworzona automatycznie i powinieneś mieć te same foldery co ja: folder-projektu \ src \ assests \ i folder-projektu \ app \ app.component.html, jeśli to pomoże, proszę o głos.
mruanova

26

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.


1
[alt] nie jest konieczne w przypadku łańcuchów, [] w przypadku wiązania danych.
chris_r

14

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">


jaka jest różnica między src = "asset / img / klogo.png" a [src] = "'asset / img / klogo.png'"?
gdbj


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

Dzięki mohit za odpowiedź w wątku. @gdbj Mam nadzieję, że masz już swoje nieporozumienia.
Bhuwan Maharjan

Chciałbym tylko wskazać przyszłym czytelnikom, aby poszukali wewnętrznych pojedynczych cudzysłowów w pierwszym komentarzu gdbj. Trudniej je zobaczyć w czcionce komentarza niż w powyższej odpowiedzi, ale ich brak może prowadzić do zamieszania. (Może zależeć od Twojej przeglądarki, nie jestem pewien.)
SilithCrowe

7

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


angular-cli umieść appi assetsfoldery osobno w srcfolderze. (przepraszam, nie jestem pewien, jak mam sformatować strukturę folderów i nazwy)
user3183717

5

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");
  1. dodaj tę 'imgname' w tagu img src na stronie html.

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


jest to lepsze dla drzew hierarchii plików, które nie są płaskie.
chris_r

-1

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.


Niepewny. dlaczego ludzie lubią głosować negatywnie. To był prawdziwy problem, przed którym stanąłem. I nadal głosował negatywnie. Zastanawiam się, dlaczego niektóre z moich pytań pozostają bez odpowiedzi, a ludzie nie głosują za ich rozwiązaniem?
Anonimowy twórca

-1

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">
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.