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.

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

Answer 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.