Angular 6 Failing To Load Images From Assets

Question

For some reason I can't get my images to show in my app. This is the error, tests and class:

The error: GET http://localhost:4200/assets/image.png 404 (Not Found)

<img class="logo" src="../../assets/image.png">
<img class="logo" src="../assets/image.png">
<img class="logo" src="assets/image.png">
//None of these work

.logo {
    height: 100px;
    width: auto;
    padding: 10px;
    display: block;
    margin: 0 auto;
}

Any idea why this is not working? My image.png is in my assets folder which is located at src/assets/image.png.

Update:

So we did a test. We copied all the node modules and the project files to another pc and there the images loaded correctly. So I assume the problem lies outside the angular project it self.

Solution 1

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

This is the right path, probably something else went wrong.

check that the image name or if its jpeg. maybe you added a new folder in the assets folder ? , like images if so the code should look like this

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

Solution 2

Add assets folder to your angular.json.

"assets": [
    "src/assets"
 ],

Then refer the images like below,

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

This should work.

Solution 3

src="assets/image.png" should work without issue. Have you restarted your build since you added in the image?

Solution 4

The folder which contains your assets (like pictures) needs to be declared in assets array inside your angular.json

Angular only recognizes those assets which have been declared in angular.json or the assets which come from web.

Additionally, from all the three options following will work for you:-

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

Solution 5

So the problem is that the angular project was lying in a location where it was causing an error. In my case it was lying in a bitbucket repository. I am not sure if that is the reason for the error though.

Try moving the whole angular project to a different location. That solved it for me :)

@Rak2018's solution is a good workaround if you would like to use that instead

View more solutions

Comments

[Frank]

Hi. Thanks for your answer. I tried this but it does not seem to solve the problem.

[Frank]

By "restarted the build" do you mean restarting the ng serve? Yes I have, I have turned off my pc multiple times while working on the project.

[Frank]

Thank you for your answer but I definitely have the right extension and the right path. The image is a .png right inside the assets folder (no extra folder inside there)

[Frank]

Thank you, so far this is the only solution that solves the problem. Though I would still like to know how to fix the img problem, because this means I can never use an img in my program...please check the update in my question

[Alen]

@frank I have read the update, the only thing that comes to my mind is that its either user's permission on the PC, an antivirus/firewall either blocking request/directory or image. Since the code is valid and works fine on the other PC.

[sɐunıɔןɐqɐp]

(This post does not seem to provide a quality answer to the question. Please either edit your answer, or just post it as a comment to the question).

[Hardik Masalawala]

I am adding image in src\assets\images in this but image not display in angular but after recompile app it will show for same path I have used before, please suggest me

[ineedtoknow]

Why is this the selected answer when it didn't answer your question (as you say in the above comment)?

[Bbit]

I know this is an old answer, but I just encountered it and this answer helped me. Can anyone explain why this has to be this way?

[TheZerg]

This is likely the right answer to the CANNOT GET error message.

[mediaguru]

Thank you. Been fighting this for awhile!