Angular 18 图片静态资源加载问题

小渣渣

需求：使用 angular-cli 创建了一个 v18 的项目，手动创建了 src/assets 文件夹，并放入了一张图片，发现无法访问，报 404 错误。

文件路径：src/assets/test.png
img 代码：<img src="assets/test.png">

网上搜索发现 v18 版本文件结构发生了变化，如下图：

D:\360Downloads>tree ng17
卷 Data 的文件夹 PATH 列表
卷序列号为 AA1B-3F2F
D:\360DOWNLOADS\NG17
├─.vscode
└─src
    ├─app
    └─assets

D:\360Downloads>tree ng18
卷 Data 的文件夹 PATH 列表
卷序列号为 AA1B-3F2F
D:\360DOWNLOADS\NG18
├─.vscode
├─public
└─src
    └─app

我使用 Angular CLI: 18.1.1、Angular CLI: 17.3.8 分别重新创建的，命令如下：

登录可见。

发现 v18 版本已经没有了 assets 文件夹，多出来了 public 文件夹。

解决方案

将 assets 文件夹剪切到 public 文件夹内。

参考：

https://stackoverflow.com/questions/78551407/images-are-not-displayed-in-angular-18
https://stackoverflow.com/questions/78526073/what-is-the-proper-way-to-reference-assets-in-the-new-angular-18-public-folder