Angular 6 无法从资产加载图像

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.

Answer 3

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

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

Answer 5

Try this:

<div class="logo"></div>

.logo {
    height: 100px;
    width: auto;
    padding: 10px;
    display: block;
    margin: 0 auto;
    background:url('assets/image.png') no-repeat center center;
}

Answer 6

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

Answer 7

it's because of you don't have permission to access file.

simple way in windows Move your project from drive C: to other drive. it's work fine.

Good luck.

Answer 8

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

also right click your picture and check if the extension is PNG instead of png, if so write image.PNG

Answer 9

Following other tutorials on the web, I created a src\\app\\assets\\images folder and put my image there. However, my app already had an assets folder in src\\assets . There are two fixes to this.

Either:

1. Put my image in the existing src\\assets folder and reference as <img src="src\\assets\\my-image.png"/> or
2. Add src\\app\\assets to my angular.json assets declaration and reference as was my original intention of src\\app\\assets\\images\\my-image.png .

Answer 10

I had the same problem as well. and for me was to add a '/' before the assests directory:

Answer 11

I had same issue, this has turned out to be a case sensitive issue on the path.

In my case image folder under assets was in capital I on the image folder. /assets/Images/angularconnect-shield.png

so check, your image path and make sure it is exactly matching with.

Answer 12

If it's due to case-sensitivity in URLs hosted by 'ng serve', there is an option to disable that. 'ng serve' uses webpack-dev-server which uses http-proxy-middleware. You can write a custom middleware script which corrects the url-case to match the file-case (it only affects the server response, the browser still sees the original url).

An example of how to code that is posted here: https://github.com/webpack/webpack-dev-server/issues/578#issuecomment-569121500

Answer 13

It could be due to parentheses in your workspace path if you're using an old version of Angular: https://stackoverflow.com/a/56736932/4179032 . (I tried it in Angular 12.2.8 and it's fixed in that at least.)