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

Question

I have strange error in my angular project. I tried to create relative path to an image. In app.component.ts I have code like this:

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
})

export class AppComponent  {
    imagePath = require("./Angular2Demo/Angular2/src/app/images/angular_logo.png");
}

In app.component.html a have code like this:

<img class="logo" [src]="imagePath" />

When I start my project, there is error in:

Failed to load the resource: the server (path to the image...)/angular_logo.png.js responded with a status of 404 (Not Found).

This path should be good, but I don't know why the image has extension .png.js, why not only .png? In my folder the image has only .png extension... Any idea why is this happening?

I saw that post, I did everything like this, but I have problem with this .js extension, that is different problem. — nemostyle

Chrillewoodz Chrillewoodz · Accepted Answer · 2018-03-01T10:23:14

You can just do

imagePath = './images/angular_logo.png';

or

imagePath = './assets/images/angular_logo.png';

if your images folder is inside the assets folder in your project.

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

2 Answers