CODEWITHSUNDEEP
angularimagepath
Tommy
Tommy

Reputation: 719

image in asset folder not accessible in Angular application

This is the profile structure of my angular6 app:

enter image description here

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?

Upvotes: 0

Views: 8779

Answers (3)

Abel Valdez
Abel Valdez

Reputation: 2408

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

Upvotes: 1

selavis production
selavis production

Reputation: 31

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

  1. Upload your project in github
  2. Go to asset/Image
  3. Open your image in github
  4. Open it in new tab
  5. Copy link
  6. Replace the link within your github html code project
  7. Open project in Stackblitz
  8. Done

Upvotes: 1

Vikas
Vikas

Reputation: 12036

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

Upvotes: 5

Related Questions