image in asset folder not accessible in Angular application

Question

This is the profile structure of my angular6 app:

Client.component.html is supposed to display the image "defaultProfilePic.png".

So it contains the following line of code:

<img [src]="url"  width="220" height="200">

Client.component.ts contains the following line of code:

private url = "../asset/images/defaultProfilePic.png";

For some reason this doesn't work. Does anybody have any idea why that might be?

Vikas · Accepted Answer · 2018-06-11T18:51:59.590

5

Yeah, the problem is you have created your own custom directory and you are trying to serve images from it.
you should use assets folder to store your static assets, images etc.

if you want to store images and static assets in another directory you need to tell CLI about it by making an entry in assets array of the angular.json file and you need to ensure that it is on the same level as the assets folder. i.e create a custom folder under app

"assets": [
              "src/favicon.ico",
              "src/assets"
               src/asset
            ],

Another mistake from your side is private url =

All databound properties must be typescript public property.

why? Refer this

and you can provide absolute path instead of the relative path because CLI knows about it

public url = "asset/images/defaultProfilePic.png";

edited Jun 11 '18 at 18:51

answered Jun 11 '18 at 18:45

Vikas

11,859
7
45
69

ok ... I created a new folder "assets" (location: "src/assets") ... in it I created an "images" folder, so the images folder is src/assets/images. I then put the following line into the file Client.component.ts: public url = "assets/images/defaultProfilePic.png"; ... however, it still doesn't work – Tommy Jun 11 '18 at 19:05
... and of course, the image file is inside the images folder (forgot to mention that) – Tommy Jun 11 '18 at 19:13
it works now ... thank you very much ... just had to restart the app – Tommy Jun 11 '18 at 19:16

score 1 · Answer 2 · edited Jan 12 '22 at 21:37

1

That sound like your path isn't the correct one try by adding another ../ and make sure that you have the following setting in .angular-cli.json

"assets": [
  "assets",
  "favicon.ico"
],

edited Jan 12 '22 at 21:37

Nikita Popov

896
10
19

answered Jun 11 '18 at 17:01

Abel Valdez

2,368
1
16
33

score 1 · Answer 3 · answered Apr 03 '20 at 13:16

I found a way to show Angular static assets (.png in my case) in Stackblitz.

Upload your project in github
Go to asset/Image
Open your image in github
Open it in new tab
Copy link
Replace the link within your github html code project
Open project in Stackblitz
Done

image in asset folder not accessible in Angular application

3 Answers3

Linked