Angular 18 image static resource loading issue

Little scum · Posted on 7/23/2024 8:47:59 AM

Requirements: I created a v18 project using angular-cli, manually created the src/assets folder, and put in an image, and found that it could not be accessed, and reported a 404 error.

File Path:src/assets/test.png
img code:<img src="assets/test.png">

An online search found that the file structure of the v18 version has changed, as shown in the figure below:

D:\360Downloads>tree ng17
The folder PATH list for the volume Data
The volume serial number is AA1B-3F2F
D:\360DOWNLOADS\NG17
├─.vscode
└─src
├─app
└─assets

D:\360Downloads>tree ng18
The folder PATH list for the volume Data
The volume serial number is AA1B-3F2F
D:\360DOWNLOADS\NG18
├─.vscode
├─public
└─src
└─app

I recreated them using Angular CLI: 18.1.1, Angular CLI: 17.3.8 respectively, and the command is as follows:

Login is visible.

I found that the v18 version no longer has the assets folder, but the public folder.

solution

Clip the assets folder to the public folder.

Reference:

The hyperlink login is visible.
The hyperlink login is visible.

[Angular] Angular 18 image static resource loading issue

Related Posts

Sections viewed