Going to their Docs @ AstroDocs
Astro.js Example
import imgReference from './image.png'; // imgReference === '/src/image.png'
import svgReference from './image.svg'; // svgReference === '/src/image.svg'
import txtReference from './words.txt'; // txtReference === '/src/words.txt'
// This example uses JSX, but you can use import references with any framework.
<img src={imgReference} alt="image description" />;
They import and reference the file.
Things I’ve Tried to do:
- Move the SVG in /public and /src to isolate the situation.
- Renamed file to ui.svg to simplify naming issues.
- Imported the svg as a component.
Nothing works it seems. Any help?
My index.astro
---
// import Settings from './icons/Settings.svg';
import ui from '../ui.svg'; // moved here and renamed file to remove potential issues.
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Mudriy | Home</title>
</head>
<body>
<h1>Astro</h1>
<!-- <img src={Settings} alt="ff"/> -->
<img src={ui} />
</body>
</html>