I have the same problem when starting learning AngularTS with a turorial using Visula Code.
I started learning AngularTS as well with a tutorial and I was told to put this into a header component:
(I even found a hint to put the path in additional single quotes inside the double quotes, which doesn’t work.)
The image does exist in the assets folder.
Furthermore I was told to replace the whole content of app.component.html with this code:
<app-header/>
After building and starting, I invoke http://localhost:4200 and the page appears but the image could not be found.
The assets are not displayed into the ‘dist‘ folder?? Why not?
The sourceode of the page idplayed in Google 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>