Angular+VS Code开发中图片无法显示的问题求助

云原生阿岚

2026-6-21

Angular项目assets资源未打包导致图片无法加载问题

问题详情

学习Angular过程中，按教程要求在header组件中添加图片引用，尝试过双引号嵌套单引号的写法，无效；图片确实存在于assets文件夹内
将app.component.html内容替换为<app-header/>
构建启动后访问http://localhost:4200，页面正常显示但图片无法加载，且assets文件夹未出现在dist目录中
两种图片路径写法均无效：<img src="assets/..."/> 和 <img src="/assets/..."/>

Chrome页面源码

<!DOCTYPE html><html lang="en"><head>  <script type="module" src="/@vite/client"></script>  <meta charset="utf-8">  <title>MyFirstProject</title>  <base href="/">  <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="icon" type="image/x-icon" href="favicon.ico"><link rel="stylesheet" href="styles.css"><style ng-app-id="ng">header[_ngcontent-ng-c4022922458] {  background-color: lightgray;  box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.5);}/*# sourceMappingURL=header.component.css.map */</style></head><body><!--nghm-->  <app-root _nghost-ng-c3361530648="" ng-version="18.0.3" ngh="0" ng-server-context="ssr"><app-header _ngcontent-ng-c3361530648="" _nghost-ng-c4022922458="" ngh="0"><header _ngcontent-ng-c4022922458=""><img _ngcontent-ng-c4022922458="" src="/assets/Logoduitbluesmall.jpg" alt="bla"></header></app-header><br _ngcontent-ng-c3361530648="">xxx <img _ngcontent-ng-c3361530648="" src="/assets/Logoduitbluesmall.jpg" alt="uff"><br _ngcontent-ng-c3361530648="">yyy <img _ngcontent-ng-c3361530648="" src="/assets/Logoduitbluesmall.jpg" alt="zack"></app-root><script src="polyfills.js" type="module"></script><script src="main.js" type="module"></script><script id="ng-state" type="application/json">{"__nghData__":[{}]}</script></body></html>