What is the proper way to reference assets in the new Angular 18 "public" folder structure inside a workspace?

Question

Problem

After generating a workspace with the new @angular/cli@18 package, I am unable to determine how to reference image assets placed in the /public folder.

This did not seem to be an issue with @angular/cli@17 workspaces but they used a different asset folder name & location.

---

Background

For comparison, v17 created a structure similar to this when using the ng new workspace-name --no-create-application command and then ng g app application-name inside that workspace:

workspace-name
 |
 projects
  |
  application-name
   |
   src
    |
    assets
  

Then, from a template you could reference an asset like so: <img src="assets/imagename.webp">

However, in v18 the created structure is generated as follows when using commands similar to above:

workspace-name
 |
 projects
  |
  application-name
   |
   public
   src

It appears that the assets are intended to go in the public folder but I have tried various permutations of pathing to reference these assets to no avail. Also, doing an ng build application-name does not appear to copy the files in the public folder over to the dist so maybe this has something to do with it.

It should be noted that when an app is generated without a workspace, I am able to reference assets simply by using asset-name.webp without issue. Additionally, the v18 workspace angular.json file has the following configuration automatically set for the assets property of the application build options:

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

---

Question

Is this a bug with the new builder or is there a new way to reference these assets or some additional configuration that needs to be done now that they are located in a different folder?

---

Solution

After doing a little investigating it looks like the cli did not set the projects.applicationName.architect.build.assets property in the angular.json file properly. Changing over the input property from public to projects/applicationName/public did the trick. Now I am able to reference assets simply with asset-name.webp.

Balaam

Answer 1

Me too, I initially had only the /public folder (no /assets folder created by "ng new project-name", Angular CLI 18.0.2), and couldn't load images from /public.

I had to create the "assets" folder myself under "public": /public/assets (and I placed my image here).

Then, <img src="/assets/test.png"> worked.

Bin

Answer 2

In angular 18 public folder config in angular.json

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

for example to load logo.png in "public/img/logo.png" just remove public/ in url.

<img src="img/icon.png" />

Seritaserjeant

This is exactly what I was looking for in regards to an ng18 project, but the example has malformed JSON with opening quotes on the keys missing. Should be: ``` { "glob": "*/", "input": "public" } ``` – Fisch

Answer 3

Solution

After doing a little investigating it looks like the @angular/cli did not set the projects.applicationName.architect.build.assets property in the angular.json file properly. Changing over the input property from public to projects/applicationName/public did the trick. Now I am able to reference assets simply with asset-name.webp.

I have opened an issue on the @angular/cli repo with regard to this so hopefully someone there can address this problem.

Balaam

Answer 4

I had the same issue today when starting a new Angular 18 project. It seems Angular looks for images in the /public/assets folder.

I used a relative path in the img tag like this: src="/assets/image.png", and it worked for me. Other path options didn't work.

Corrida

Answer 5

solution to image in angular 18:

in angular 18 version there is not "assets" folder. if you want to put in your project images, you put the images in the "public" folder and not in the assets folder and you will write in the src of the img the name of the image without any routing.

for example:

if this is the name of the image:

"2.JPG"

so you write in the img tag:

< img src="2.JPG" alt="">

and you dont have to write all the route.

i hope i helped and it will be usefull.

Barricade

Answer 6

You just need to put assets folder in correct order,as mentioned in the following

to add in src of img tag

use this

'assets/...'

enter image description here

Boffin