CODEWITHSUNDEEP
angulartypescriptasp.net-web-api2visual-studio-code
user2136053
user2136053

Reputation:

Adding image file in Angular

I am creating a project in Angular 4 using Visual studio code. How can we add images(local image on my desktop) in the Visual studio code and display in the view?(we can create a model and display the image by the SRC tag but that works for the image hosted in some server).

If we cant add the images in Visual studio code then how do we render the local images on the view?

Please help

Upvotes: 2

Views: 20911

Answers (2)

mruanova
mruanova

Reputation: 7105

Possible duplicate:

How to load image (and other assets) in Angular an project?

In my project I am using the following syntax in my app.component.html:

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

or

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

use [src] as a template expression when you are binding a property using interpolation:

<img [src]="imagePath" />

is the same as:

<img src={{imagePath}} />

Source: how to bind img src in angular 2 in ngFor?

Upvotes: 2

Sathya
Sathya

Reputation: 13

Visual studio code cannot store the image for the Angular application. It is just an editor like notepad with advanced features to make coding a pleasurable experience.

You could place your image in the folder where you have the package.json file and you could display the image in your app by replacing the web url with just the image name.

Of course it is better to create a separate folder for images and use the absolute/relative path in your code where you are using the images.

Hope that helps.

Upvotes: 1

Related Questions