Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why doesn't my Angular app display images?

I created a simple html file which should display svg image:

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>HelloWorld</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
    <img src="D:/Angular/hello-world/node_modules/bootstrap-icons/icons/star.svg">
</body>

</html>

It displays fine in Google Chrome but Firefox displays nothing at all but that's another issue...

When I'm running exactly the same code but in an Angular project inside index.html Google Chrome shows the "couldn't load" image. Does somebody know why in a pure html file it works but when running from Angular project it stops? And why firefox displays nothing?

like image 790
patrykito Avatar asked Dec 20 '25 02:12

patrykito


1 Answers

For an Angular app, images need to be in a specific folder for it to be able to find said images. Move (or copy) the image to src/assets and use the path assets/star.svg.

like image 87
anastaciu Avatar answered Dec 21 '25 17:12

anastaciu