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?

See the post https://stackoverflow.com/questions/36287518/angular-2-img-src-in-a-relative-path — Raja Ramachandran, Mar 01 '18 at 10:05
I saw that post, I did everything like this, but I have problem with this .js extension, that is different problem. — nemostyle, Mar 01 '18 at 10:09

score 2 · Answer 1 · answered Mar 01 '18 at 10:19

2

Why not just:

imagePath = './Angular2Demo/Angular2/src/app/images/angular_logo.png';

I don't understand what you are trying to accomplish by using require. require is what is adding the ".js" extension, and it won't return you a path either -- it will attempt to load JavaScript and return a JavaScript object.

answered Mar 01 '18 at 10:19

kshetline

12,547
4
37
73

Thank you for your answer, the problem is that I don't need this part: .Angular2Demo/Angular2/src. But your point have sense. ;-) – nemostyle Mar 01 '18 at 10:27

score 2 · Accepted Answer · answered Mar 01 '18 at 10:23

2

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.

answered Mar 01 '18 at 10:23

Chrillewoodz

27,055
21
92
175

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

2 Answers2