typescript - Lägga till bildfil i Angular


Jag skapar ett projekt i Angular 4 med Visual Studio Code. Hur kan vi lägga till bilder (lokala bilder på mitt skrivbord) i Visual Studio Code och visa dem i vyn? (vi kan skapa en modell och visa bilden med SRC-taggen men det fungerar för bilder som är hostade på någon server).

Om vi inte kan lägga till bilderna i Visual Studio Code, hur renderar vi då de lokala bilderna i vyn?

Snälla hjälp

Svar #1

Möjlig dubblett:

Hur man laddar en bild (och andra resurser) i ett Angular-projekt?

I mitt projekt använder jag följande syntax i min app.component.html:

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

eller

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

använd [src] som ett templatuttryck när du binder en egenskap med interpolering:

<img [src]="imagePath" />

är samma som:

<img src={{imagePath}} />

Källa: hur man binder img src i Angular 2 i ngFor?

Svar #2

Visual Studio Code kan inte lagra bilden för Angular-applikationen. Det är bara en editor som Anteckningar med avancerade funktioner för att göra kodning till en trevlig upplevelse.

Du kan placera din bild i mappen där du har filen package.json och du kan visa bilden i din app genom att ersätta webbadressen med bara bildnamnet.

Självklart är det bättre att skapa en separat mapp för bilder och använda den absoluta/relativa sökvägen i din kod där du använder bilderna.

Hoppas det hjälper.