如何在AstroJS中使用SVG？尝试多种方法仍失效求帮助

我按照Astro官方文档里的示例，尝试通过导入文件引用的方式使用SVG，但始终无法生效。官方示例代码如下：

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'

// 此示例使用JSX，但你可以在任何框架中使用导入引用
<img src={imgReference} alt="image description" />;

我已经尝试了以下方法排查问题，但都没有效果：

• 将SVG文件分别移动到/public和/src目录
• 将文件重命名为ui.svg以简化命名
• 将SVG作为组件导入

附上我的index.astro代码：

---
// import Settings from './icons/Settings.svg';
import ui from '../ui.svg'; // 移动文件并重命名以排除潜在问题
---

<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>

恳请各位提供解决办法。

内容的提问来源于stack exchange，提问作者ZuesSSSSS