Angular项目导入Word导出HTM文件后image001.png无法渲染如何解决

图片正确存放位置 #

由于你在angular.json中配置的静态资源根路径为src/assets，Angular构建时只会将该目录下的资源原样输出到最终构建产物的根路径下，因此image001.png的正确存放路径为：src/assets/Angular.io_files/image001.png，需将Word导出生成的完整Angular.io_files文件夹整体放入src/assets目录下。

完整修复步骤 #

• 将Word同步导出的Angular.io_files文件夹整体移动至项目的src/assets目录下，确认路径层级正确，确保图片的本地物理路径为src/assets/Angular.io_files/image001.png
• 修改组件HTML模板中对应img标签的src属性，改为/assets/Angular.io_files/image001.png，路径开头的斜杠表示从项目静态资源根路径寻址，可避免相对路径受当前页面路由影响导致寻址错误
• 若修改后仍存在404报错，检查angular.json的assets配置是否包含以下规则，确保assets目录被正确识别为静态资源目录：

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

• 重启本地开发服务（重新执行ng serve命令），确保静态资源和配置修改被正确加载

问题原因说明 #

之前尝试未生效是因为直接使用相对路径Angular.io_files/image001.png时，Angular会从当前页面路由的路径下寻址该资源，且未放入assets目录的资源不会被打包进构建产物，自然无法被访问到。

内容的提问来源于stack exchange，提问作者greg