Can't display static image in the same folder as the component in Angular [closed]

Question

In the directory of my component, I've put an image. It's a good, old, plain PNG with a logotyp. So there are four files in there:

• blobb.png
• blobb.comp.ts
• blobb.comp.html
• blobb.comp.scss

In the HTML file, I used a static source link in a default IMG tag like this.

<img src="./blobb.png">

I was trying to follow the setup suggested in this blog. At the moment, I have no need for dynamic images. The static ones will suffice. My understanding's that assets folder is an option but not required.

There's no error, except for the 404 Not found, of course. The link to the missing file is:

https://localhost:44385/logo02.png

I'm not sure how to deduce if it's a matter of incorrect link to the image file or if the file isn't accessible. How can I diagnoze it furhter?

Answer 1

You need to put the image in assets folder and then reference it in your html like this

<img src="assets/img/logo.png">

You need to do this, as the cli compiles and bundles your application it also bundles your assets too and path to image may change during bundling process.

See this link for an example