CODEWITHSUNDEEP
htmlangularimage
thegreathypocrite
thegreathypocrite

Reputation: 2363

(Angular) Image won't show

As the title says, the image won't display. Here is my code in my component.html

<div>
    <img src="logo.png" alt="...">
</div>

When I looked at chrome's console it gave me this error 

Failed to load resource: the server responded with a status of 404 (Not Found)            logo.png

The logo.png file is in the same folder as the component.html. What's wrong with this and what can I do? I'm currently using Angular CLI: 1.7.4; Node: 8.11.1; Typescript: 2.8.1 Hopefully someone can help.

Upvotes: 3

Views: 15594

Answers (2)

user4676340
user4676340

Reputation:

Angular is a Single Page Application.

This means that you have only one page, and that's index.html.

So, when you write your relative urls, you need to write them from index.html, not from where you component is.

Also, Angular CLI recommends putting your resources in the assets folder, and for a reason : once minified and bundled, onle the files declared as assets stay in your dist.

If you don't want to do that, you will need to add your image as an asset into your angular-cli.json file.

Upvotes: 7

Pardeep Jain
Pardeep Jain

Reputation: 86790

Put your all images in the assets folder and try to load like this

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

As, Angular try to load all the static content like images, fonts etc from the assets folder.

Upvotes: 6

Related Questions