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?
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With