前往他们的Docs @ AstroDocs
- Astro.js示例 *
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" />;它们导入并引用文件。
我想做的事情：
1.移动/public和/src中的SVG以隔离这种情况。
1.将文件重命名为ui。svg来简化命名问题。
1.将svg作为组件导入。
似乎什么都不管用。有什么帮助吗？
- 我的索引天文 *
---
// 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>
2条答案
按热度按时间ma8fv8wu1#
导入路径以两个点而不是一个点开始，这会改变路径，使其与文档中的示例不同。
如果
ui.svg位于src/ui.svg，则此代码应该可以工作uxhixvfz2#
这个问题似乎是一个bug。
解决方案：
将.svg重命名为.astro（
ui.astro），因为SVG在技术上能够成为它们自己的组件。然后参照组件，就像使用组件一样。