CODEWITHSUNDEEP
angular
nemostyle
nemostyle

Reputation: 814

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

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?

Upvotes: 0

Views: 1696

Answers (2)

Chrillewoodz
Chrillewoodz

Reputation: 28328

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.

Upvotes: 2

kshetline
kshetline

Reputation: 13682

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.

Upvotes: 2

Related Questions