Display image using angular 2

问题

I am very new to angular 2 I am stuck here where i have to display an image for which I'm using relative path­­­­­­­­­­­­­­­­­­­­

<img src="./../images/publicVideo1.PNG">

but getting the below error

null:1 GET http://localhost:4200/null 404 (Not Found)

The above is the app structure where I have image in images folder which I'm trying to access from public-videos.component.html

I dont understand where I'm wrong Any help would be appreciated.

回答1:

create one dir assets in src directory. and move images directory into assets and then you can access image like that. image not found in app folder because we need to set path in assets[] block in the .angular-cli.json. we need set path into asset block we access it. does this help.

<img src="../../assets/images/publicVideo1.PNG">

angular-cli.json

回答2:

Try like this one here

<img [src]="defaultProfilePic" />

and in your component

defaultProfilePic: string ='assets/profile.png';

if this doesn't work it is because of the relative path you used. If you are using visualCode it will help you finding the exact path.

回答3:

Mention the path relative to your index.html. If your index.html is inside the src folder, then try this:

<img src="./app/images/publicVideo1.PNG">

回答4:

try this <img src="./src/app/images/publicVideo1.PNG">

来源：https://stackoverflow.com/questions/44472332/display-image-using-angular-2