diff --git a/src/content/docs/zh-cn/guides/imports.mdx b/src/content/docs/zh-cn/guides/imports.mdx index 898c37cc5a862..6404daa9653da 100644 --- a/src/content/docs/zh-cn/guides/imports.mdx +++ b/src/content/docs/zh-cn/guides/imports.mdx @@ -133,17 +133,22 @@ CSS 模块帮助你在前端强制执行组件样式隔离,并生成唯一的 ### 其他资源 ```jsx -import imgReference from './image.png'; // img === '/src/image.png' -import svgReference from './image.svg'; // svg === '/src/image.svg' -import txtReference from './words.txt'; // txt === '/src/words.txt' +// 返回带有 `src` 和其他属性的对象 +import imgReference from './image.png'; +import svgReference from './image.svg'; -// 这个例子使用 JSX,但你可以在任何框架下使用导入引用。 +// HTML 或者 UI 框架组件可以用它们来渲染图片 image description; + +// Astro 的 `` 和 `` 组件会默认访问 `src` +image description ``` -所有其他没有明确提到的资源可以通过 ESM 的 `import` 语句导入,并将返回最终构建中的资源引用连接。这对使用链接引用非 JS 资源很有用,比如创建一个带有 `src` 属性的图片元素指向该图片。 +所有其他没有明确提到的资源可以通过 ESM 的 `import` 语句导入,并将返回最终构建中的资源的 URL 引用(例如 `/_astro/my-video.C7vXpQtF.mp4`)而不是一个对象。 + +这对使用 URL 引用非 JS 资源很有用,比如创建一个带有 `src` 属性的图片元素指向该图片。 -将图片放在 `public/` 文件夹中也很有用,这在[项目结构页面](/zh-cn/basics/project-structure/#public)中有所解释。 +将图片和其他资源放在 `public/` 文件夹中也很有用,这在[项目结构页面](/zh-cn/basics/project-structure/#public)中有所解释。 有关附加 Vite 导入参数(例如 `?url`、`?raw`)的更多信息,请参阅 [Vite 静态资源处理指南](https://cn.vite.dev/guide/assets)。