I have newly started project in Angular 19 with default setting and just a few simple components. I'm trying to add picture in one place, created public folder at /src as it was missing and apparently this is new folder instead of assets. Full path to image is src/public/radom.webp

Referenced it in template like this: <img mat-card-image ngSrc="/radom.webp" alt="Sad railroad" height="1024" width="1024"/> and it does not load, url localhost:4200/radom.webp returns 404 error.

Tried also:

ngSrc="radom.webp"
ngSrc="/public/radom.webp"
ngSrc="public/radom.webp"
ngSrc="assets/radom.webp"
ngSrc="/assets/radom.webp"
ngSrc="src/radom.webp"
ngSrc="/src/radom.webp"
ngSrc="src/public/radom.webp"
ngSrc="/src/public/radom.webp"
ngSrc="radom"

and with src attribute, all of that above returns 404.

angular.json is unmodified, as it was generated by angular/cli:

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

Restarted ng serve, cleared cache, nothing. Seriously running out of ideas, even throwing more or less random words and chat-gpt did not produce any usefull solution or even idea.

In previous versions with assets folder it just worked every single time...

I have newly started project in Angular 19 with default setting and just a few simple components. I'm trying to add picture in one place, created public folder at /src as it was missing and apparently this is new folder instead of assets. Full path to image is src/public/radom.webp

Referenced it in template like this: <img mat-card-image ngSrc="/radom.webp" alt="Sad railroad" height="1024" width="1024"/> and it does not load, url localhost:4200/radom.webp returns 404 error.

Tried also:

ngSrc="radom.webp"
ngSrc="/public/radom.webp"
ngSrc="public/radom.webp"
ngSrc="assets/radom.webp"
ngSrc="/assets/radom.webp"
ngSrc="src/radom.webp"
ngSrc="/src/radom.webp"
ngSrc="src/public/radom.webp"
ngSrc="/src/public/radom.webp"
ngSrc="radom"

and with src attribute, all of that above returns 404.

angular.json is unmodified, as it was generated by angular/cli:

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

Restarted ng serve, cleared cache, nothing. Seriously running out of ideas, even throwing more or less random words and chat-gpt did not produce any usefull solution or even idea.

In previous versions with assets folder it just worked every single time...

• angular
• angular-material

2 Answers 2

Here’s my revised attempt in Angular 19:

This is the file path: src/public/background.png

<img src="/background.png" alt="Sad railroad" height="1024" width="1024"/>

You need to modify the configuration in angular.json as follows:

"assets": [
  {
    "glob": "**/*",
    "input": "src/public" <-- Change this part
  }
]

When using the glob pattern like above, it will copy all files from src/public to the root of the output directory (e.g., dist/), so you can reference the image as /background.png.

However, if you use this configuration instead:

"assets": [
  "src/public"
]

The files will be copied to the public folder in the output directory (e.g., dist/public/), and you’ll need to adjust the image tag to:

<img src="/public/background.png" alt="Sad railroad" height="1024" width="1024"/>

I have checked in angular.json usually assets define like below

"assets": [
              "src/assets",
              "src/favicon.ico",
              "src/manifest.webmanifest"
            ],

and I have used image like

<img mat-card-image [src]="/assets/radom.webp" alt="Sad railroad" height="1024" width="1024"/>