angular-cli: Assets/Images not being served...

Versions

Angular CLI: 1.6.6
Node: 6.9.4
OS: win32 x64
Angular: 5.2.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
@angular/cli: 1.6.6
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.6
@schematics/angular: 0.1.17
typescript: 2.5.3
webpack: 3.10.0

Repro steps

add any image to /src/assets/images/
reference image in HTML
ng serve

Observed behavior

image is not found Request URL:http://localhost:4200/assets/images/logo.png Request Method:GET Status Code:404 Not Found

I have made sure that my angular-cli.json lists the assets folder… Assets folder directly under src directory HTML is typical

  <img src="./assets/images/logo.png"/>

Image is 404

Here is a minimal example… https://github.com/smatthews1999/testng

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 44 (1 by maintainers)

Links to this issue

Image showing up after app reload, not after refreshing browser

Most upvoted comments

@smatthews1999 <img src="assets/images/ic_launcher.png"> It ran successfully for me.

+41

luoguibin on Mar 22, 2018

@aajmot I thought I should downgrade to 1.6.3 to overcome, Luckily found out a solution without downgrading, just remove all the symbols, brackets for all your folders starting from particular drive. If u’r project is in E drive follow below change this location

E:\Data\project - 1\Angular(learning)\app

E:\Data\project1\Angularlearning\app

U will be able to see the loaded assets folder to the browser under sources tab in chrome developer tools

+38

avinashdv on Jun 10, 2018

src=“assets/info.png” use this in place of src=“/assets/info.png” It will work for everyone

hidayatarg on Dec 3, 2018

in developer tools, we can see why our pictures are broken… It is because the path to your images is wrong. All of your files are downloaded from for example localhost/AngularApp/ so your images are on localhost/AngularApp/assets … but unfortunately, the browser looks for them on localhost/assets and that’s why it doesn’t get anything.

solution:

save img URL in this format: ‘./assets/fries.png’

PavelFranta on Oct 29, 2018

Assets not loading after --prod build and then deployed to firebase? all styles font etc work, just not images?? assets folder only?? everything works fine on local server. All other projects deployed successfully in the past? this project is giving me grief! ng v 6.1.0 I have no errors???

alvics on Aug 15, 2018

this is worked for me --> src=“assets/images/logo.png”

Thanks.

bkb540 on Nov 15, 2018

Figured it out, apparently file names are case sensitive.

PTC-JoshuaMatthews on Jul 10, 2018

I tried the solution @avinashdv proposed and it worked. You need to make sure all the folders of your project’s path have no : [] or “.” in them my project was [BYCK][1.0] when I turned it into BYCK_10 it worked .

YousraBenzeghiba on Jun 11, 2018

I have the same problem:

angular.json

"assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "assets"
              }
            ],

And my error:

http://localhost:8008/assets/images/icon.png 404 (Not Found)

moritzgloeckl on Feb 1, 2019

@alvics no lucky yet. posted on stackoverflow too https://stackoverflow.com/questions/51853387/angular-6-build-cant-load-images-on-firebase-hosting

paulimfavarato on Aug 15, 2018

I am still having this issues. There are no special characters in my file path except “_”, image is inside assets/img folder. I see it in the dist for prod build, but local dev server isn’t serving it up.

PTC-JoshuaMatthews on Jul 10, 2018

I’ve run into the same issue I think and posted on stack here: angular-8-assets-not-loading and was told to update this thread (hope that’s ok 😃 ).

Basically check the full path, I had parenthesis in mine and that stopped the assets from working.

myTestApp2 => works
‘my test’ => works
‘my test(12)’ => doesn’t work

Hope it helps someone !

jorv83 on Jun 24, 2019

nothing works using latest angular 7

ng build --aot false --buildOptimizer=false --prod --deploy-url “https://mydomain.com:9999/api/”

<head> <base href="/"> ...

project name is api

prefix in angular.json “api”

    "projects": {
        "api": {
            "root": "",
            "sourceRoot": "/src",
            "projectType": "application",
            "prefix": "api",
            "schematics": {

<img src='assets/logo-pp.png' / >

your assertion that referencing from assets is wrong its broken

root paths especially off of docroot are NOT properly being spelled out thru and within bundles

more info… tsconfig

        "baseUrl": "./src",
        "paths": {
            "@app/*": [
                "app/*"
            ],
            "@env/*": [
                "environments/*"
            ],
            "@assets/*": [
                "assets/*"
            ],
            "@ext/*": [
                "ext/*"
            ]
        },

here is a piece of angular.json

            "architect": {
                "build": {
                    "builder": "@angular-builders/custom-webpack:browser",
                    "options": {
                        "customWebpackConfig": {
                            "path": "extra-webpack.config.js"
                        },
                        "outputPath": "dist/api",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "src/tsconfig.app.json",
                        "assets": [
                            {
                                "glob": "favicon.ico",
                                "input": "src",
                                "output": "/"
                            },
                            {
                                "glob": "**/*",
                                "input": "src/assets",
                                "output": "/assets"
                            }
                        ],

I dont get this… the i18n files beneath assets/* wont load either

unless I rig up a pointer in environments.ts

i18nPrefix: '/api',

does this need to be done for assets images on templates too ?

This is end end result in the markup

<img _ngcontent-c9="" src="assets/logo-pp.png">

nhhockeyplayer on Jan 20, 2019

Hi !

Same issue here when trying to ng build --prod on my server. My path contains no special characters, my cases are respected.

Working with

angular-cli : 6.2.3, Node : 8.9, Angular : 5.2.3

My href in my index html is : <base href="./">

I do have my assets folder appearing in the dist folder, but still the path is not working. I guess that the path when built is not corresponding to what i’m thinking, even if it fits perfectly

<img src="assets/images/IconSyderCompact.png"> Note that in my case my img tag is not in index.html but in a another html file within index.html, dunno if it can modify anything

In angular.json :

    "Crapo": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/assets"
            ],

The only solution i found is to convert the image to base64. I would like very much to understand the issue here.

Linpter on Sep 27, 2018

Can you try using the binding…

aajmot on Jun 11, 2018