# @astrojs/image 中文文档 规范地址：https://npmcn.com/package/%40astrojs/image/ 版本：0\.18\.0 npm 元数据更新时间：2025-09-18T17:34:23.182Z 中文译文更新时间：2026-11-07T01:12:54.225Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40astrojs/image 原文对照：https://npmcn.com/package/%40astrojs/image/?lang=original 项目主页：https://docs.astro.build/en/guides/integrations-guide/image/ 源码仓库：https://github.com/withastro/astro 弃用说明：@astrojs/image is deprecated in favor of astro:assets\. Please see the migration guide for more information: https://docs\.astro\.build/en/guides/upgrade-to/v3/\\\#removed-astrojsimage ## 关键信息（来自 npm 元数据） - 包体积（解压后）：7.5 MB，99 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - 运行依赖：6 个 - peer 依赖：astro ^2\.10\.15，sharp \>=0\.31\.0 - 首次发布：2022-07-01T15:53:30.604Z - 最新版本发布：2023-08-30T15:57:12.909Z - 近 30 天下载量：5406（2026-10-07 至 2026-11-05，npm 官方下载统计） - 已发布版本数：116（近 12 个月 0 个） ## 中文简介 在您的 Astro 站点装入并转换图像 ## 安装 ```sh npm install @astrojs/image ``` 也可以使用：`pnpm add @astrojs/image`、`yarn add @astrojs/image`、`bun add @astrojs/image` ## README # @astrojs/图像qq > 在Astro v3.0 (Fall 2023)中,这种整合将被贬低,有利于 `astro:assets` 模块。 请看 [资产文件](https://docs.astro.build/en/guides/assets/) 更多信息. 这个 **[Astro 集成系统](https://docs.astro.build/en/guides/integrations-guide/)** 优化您的图像 [Astro项目](https://astro.build/)Astro v2 中只支持所有静态站点和 [一些服务器侧渲染部署主机](https://npmcn.com/package/%40astrojs/image/#readme-installation)。 。 。 . - **[为什么 `@astrojs/image`? 吗?](https://npmcn.com/package/%40astrojs/image/#readme-why-astrojsimage)** - **[安装](https://npmcn.com/package/%40astrojs/image/#readme-installation)** - **[使用量](https://npmcn.com/package/%40astrojs/image/#readme-usage)** - **[调试](https://npmcn.com/package/%40astrojs/image/#readme-debugging)** - **[配置](https://npmcn.com/package/%40astrojs/image/#readme-configuration)** - **[实例](https://npmcn.com/package/%40astrojs/image/#readme-examples)** - **[解决问题](https://npmcn.com/package/%40astrojs/image/#readme-troubleshooting)** - **[捐款](https://npmcn.com/package/%40astrojs/image/#readme-contributing)** - **[更改日志](https://npmcn.com/package/%40astrojs/image/#readme-changelog)** ## 为什么 `@astrojs/image`? 吗? 图像在整体站点性能和可用性中起很大作用. 使用适当的尺寸图像可以改变一切,但往往难以自动化. 这种一体化提供 `` 财务报告和审定财务报表 `` 以及一个基本的图像变压器,并全力支持静态站点和服务器侧渲染。 内置的图像变压器也是可替换的,打开了未来与您最喜爱的托管图像服务相配合的集成的大门. ## 安装 与我们的整合,我们建议安装 [锐口](https://sharp.pixelplumbing.com/) 在适当情况下. 这个 `@astrojs/image` 默认图像变压器基于 [斯库什语Name](https://github.com/GoogleChromeLabs/squoosh) 并使用WebAssembly支持大多数部署环境,包括不支持锐器的环境,如StackBlitz. 为了更快的构建和对图像转换的更精细的控制,除了安装尖端 `@astrojs/image` 若为 - 你在和Astro一起建一个静态网站. - 您正在使用支持节点JS的 SSR 部署主机 `@astrojs/netlify/functions`, (中文(简体) ), `@astrojs/vercel/serverless` 或者说 `@astrojs/node`。 。 。 . 请注意: `@astrojs/image` 目前不支持在 - 苏维埃社会主义共和国 - `@astrojs/deno` - `@astrojs/netlify/edge-functions` - `@astrojs/vercel/edge` ### 快速安装 这个 `astro add` 命令行工具为您实现安装自动化。 在新的终端窗口中运行以下命令之一 。 (如果你不确定您使用的是哪个软件包管理器, 请运行第一个命令 。) 然后,按提示键,并在终端输入"y"(意为"是"),每个字. ```sh # Using NPM npx astro add image # Using Yarn yarn astro add image # Using PNPM pnpm astro add image ``` 如果你遇到任何问题, [你可以在GitHub上向我们报告](https://github.com/withastro/astro/issues) 并尝试下面的人工安装步骤. ### 手动安装 首先,安装 `@astrojs/image` 使用您的软件包管理器的软件包。 如果你用npm或不确定, 在终端运行这个: ```sh npm install @astrojs/image ``` 然后,把这个整合到您的 `astro.config.*` 使用 `integrations` 属性 : ```js // astro.config.mjs import { defineConfig } from 'astro/config'; import image from '@astrojs/image'; export default defineConfig({ // ... integrations: [image()], }); ``` ### 安装 `sharp` (可选) 首先,安装 `sharp` 使用您的软件包管理器的软件包。 如果你用npm或不确定, 在终端运行这个: ```sh npm install sharp ``` 那么,更新你的整合 `astro.config.*` 要使用内置文件的文件 `sharp` 图像变压器. ```js // astro.config.mjs import { defineConfig } from 'astro/config'; import image from '@astrojs/image'; export default defineConfig({ // ... integrations: [ image({ serviceEntryPoint: '@astrojs/image/sharp', }), ], }); ``` ### 更新 `env.d.ts` 为了获得最佳发展经验,请在您的项目中添加综合类型定义 `env.d.ts` 文档. ```typescript // Replace `astro/client` with `@astrojs/image/client` /// ``` 或者,或者,如果你的项目正在通过一个 `tsconfig.json` ```json { "compilerOptions": { // Replace `astro/client` with `@astrojs/image/client` "types": ["@astrojs/image/client"] } } ``` ## 使用量 ```astro --- import { Image, Picture } from '@astrojs/image/components'; import heroImage from '../assets/hero.png'; --- // optimized image, keeping the original width, height, and image format descriptive text // specify multiple sizes for responsive images or art direction --- ``` 包含的图像变压器支持图像的再大小并编码到不同的图像格式. 第三方图像服务也能为自定义转换增加支持(例如: `blur`, (中文(简体) ), `filter`, (中文(简体) ), `rotate`(见e/cn.4/sub.2/2002/l.48等). 阿斯特罗 `` 财务报告和审定财务报表 `` 组件要求 `alt` 属性,为图像提供描述文本。 如果缺少备选案文文本, 将会登录一个警告, 如果没有提供备选案文文本, 将来发布集成将会出错 . 如果图像只是装饰性的(即无助于理解页面),设置 `alt=""` 这样图像就可以被屏幕阅读器正确理解和忽略. ### `` 内置 `` 组件用于创建优化 `` 用于 URL 访问的远程图像以及从您的工程导入的本地图像 `src/` 目录. 除了组件特定属性外,任何有效的 HTML 属性 `` 列入 `` 构成部分将列入已建 ``。 。 。 . #### 曲线 **类型 :** `string` | `ImageMetadata` | `Promise` **要求 :** `true` 原始图像文件的来源 . 对于远程图像,请提供完整的URL.(例如. `src="https://astro.build/assets/blog/astro-1-release-update.avif"`(中文(简体) ) 对于您工程中的图像 `src/`: 相对于 `src/` 目录。 (例如:. `src="../assets/source-pic.png"`(中文(简体) ) 对于位于您的图像 `public/` 目录: 使用相对于 `public/` 目录。 (例如:. `src="/images/public-image.jpg"`) (中文(简体) ). 这些工作就像远程图像. #### 备选案文 **类型 :** `string` **要求 :** `true` 定义图像的替代文本描述. 设定为空字符串( E)`alt=""`),如果图像不是内容的关键部分(例如它是装饰或跟踪像素). #### 格式 **类型 :** `'avif' | 'jpeg' | 'jpg' | 'png' | 'svg' | 'webp'` **默认 :** `undefined` 优化后图像中使用的输出格式. 如果 `format` 未提供. 在使用默认的图像变压器Squoosh时,远程图像需要这个属性,这是因为不能推断出原始格式. 添加到 v0. 15: 您可以使用 `` 组件在使用 SVG 图像时,但 `svg` 选项只能当原始图像是 `.svg` 文档。 其他图像格式( 如 `.png` 或者说 `.jpg`)不能转换成矢量图像。 这个 `.svg` 图像本身不会被改变,而是最终 `` 将适当优化整合. #### 质量 **类型 :** `number` **默认 :** `undefined` 优化时使用的压缩质量 。 如果不提供图像服务,视图像格式而定,图像服务将使用自己的默认质量. #### 宽度 **类型 :** `number` **默认 :** `undefined` 输出图像的理想宽度 。 与 `height` 将图像剪切成精确大小,或 `aspectRatio` 以自动计算并裁剪高度. 尺寸对本地图像是可选的,如果不提供原始图像大小将使用. 用于远程图像,包括图像 `public/`,整合需要能够计算出优化图像的维度. 可通过提供 `width` 财务报告和审定财务报表 `height` 提供一个维度和一个维度 `aspectRatio`。 。 。 . #### 高度 **类型 :** `number` **默认 :** `undefined` 输出图像的理想高度 。 与 `width` 将图像剪切成精确大小,或 `aspectRatio` 以自动计算并裁剪宽度. 尺寸对本地图像是可选的,如果不提供原始图像大小将使用. 用于远程图像,包括图像 `public/`,整合需要能够计算出优化图像的维度. 可通过提供 `width` 财务报告和审定财务报表 `height` 提供一个维度和一个维度 `aspectRatio`。 。 。 . #### 方面 Ratio **类型 :** `number` | `string` **默认 :** `undefined` 输出图像的理想相比 。 组合到两个 `width` 或者说 `height` 以自动计算并裁剪另一个维. A 类 `string` 可通过下列形式提供: `{width}:{height}`,例如: `16:9` 或者说 `3:4`。 。 。 . A 类 `number` 也可以提供,在构建时间计算出宽比时有用. 这可以是内置数字, 如 `1.777` 或作为JSX的表达方式 `aspectRatio={16/9}`。 。 。 . 用于远程图像,包括图像 `public/`,整合需要能够计算出优化图像的维度. 可通过提供 `width` 财务报告和审定财务报表 `height` 提供一个维度和一个维度 `aspectRatio`。 。 。 . #### 背景情况 **类型 :** `ColorDefinition` **默认 :** `undefined` > 默认 Squoosh 服务不支持此功能 。 见 [安装部分](https://npmcn.com/package/%40astrojs/image/#readme-installing-sharp-optional) 详细情况 `sharp` 相反,服务. 背景颜色用于在使用时填充剩余背景 `contain` 联 合 国 `fit` 属性. 背景颜色也用于替换 Alpha 通道 `sharp`是因为 `flatten` 方法。 如果输出格式 不支持透明度(即:. `jpeg`),最好包含背景颜色,否则会使用黑色 作为透明像素的默认替换. 参数接受 `string` 作为价值. 参数可以是 [命名为 HTML 颜色](https://www.w3schools.com/tags/ref_colornames.asp)十六进制 格式中3或6个十六进制字符的颜色代表 `#123[abc]`,形式中的 RGB 定义 `rgb(100,100,100)`,形式中的 RGBA 定义 `rgba(100,100,100, 0.5)`。 。 。 . #### 合适的 **类型 :** `'cover' | 'contain' | 'fill' | 'inside' | 'outside'` **默认 :** `'cover'` > 默认 Squoosh 服务不支持此功能 。 见 [安装部分](https://npmcn.com/package/%40astrojs/image/#readme-installing-sharp-optional) 详细情况 `sharp` 相反,服务。 更多信息 [怎么样 `sharp` 调整图像大小](https://sharp.pixelplumbing.com/api-resize)。 。 。 . 如何调整图像大小以适应两者 `height` 财务报告和审定财务报表 `width`。 。 。 . #### 职位 **类型 :** `'top' | 'right top' | 'right' | 'right bottom' | 'bottom' | 'left bottom' | 'left' | 'left top' | 'north' | 'northeast' | 'east' | 'southeast' | 'south' | 'southwest' | 'west' | 'northwest' | 'center' | 'centre' | 'cover' | 'entropy' | 'attention'` **默认 :** `'centre'` > 默认 Squoosh 服务不支持此功能 。 见 [安装部分](https://npmcn.com/package/%40astrojs/image/#readme-installing-sharp-optional) 详细情况 `sharp` 相反,服务。 更多信息 [怎么样 `sharp` 调整图像大小](https://sharp.pixelplumbing.com/api-resize)。 。 。 . 合适时作物的位置 `cover` 或者说 `contain`。 。 。 . ### `` 内置 `` 组件用于创建优化 `` 用于 URL 访问的远程图像以及从您的工程导入的本地图像 `src/` 目录. 除了组件特定属性外,任何有效的 HTML 属性 `` 列入 `` 构成部分将列入已建 ``。 。 。 . #### 曲线 **类型 :** `string` | `ImageMetadata` | `Promise` **要求 :** `true` 原始图像文件的来源 . 对于远程图像,请提供完整的URL.(例如. `src="https://astro.build/assets/blog/astro-1-release-update.avif"`(中文(简体) ) 对于您工程中的图像 `src/`: 相对于 `src/` 目录。 (例如:. `src="../assets/source-pic.png"`(中文(简体) ) 对于位于您的图像 `public/` 目录: 使用相对于 `public/` 目录。 (例如:. `src="/images/public-image.jpg"`) (中文(简体) ). 这些工作就像远程图像. #### 备选案文 **类型 :** `string` **要求 :** `true` 定义图像的替代文本描述. 设定为空字符串( E)`alt=""`),如果图像不是内容的关键部分(例如它是装饰或跟踪像素). #### 大小 **类型 :** `string` **要求 :** `true` HTML 图像元素属性 `sizes` 允许您指定媒体条件列表中每个图像的布局宽度. 见 [MDN 数据](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes) 更多细节. #### 宽度 **类型 :** `number[]` **要求 :** `true` 应对响应图像构建的大小列表 。 这与 `aspectRatio` 以计算每个已建图像的最终尺寸. ```astro // Builds three images: 400x400, 800x800, and 1200x1200 ``` #### 方面 Ratio **类型 :** `number` | `string` **默认 :** `undefined` 输出图像的理想相比 。 这与 `widths` 以计算每个已建图像的最终尺寸. A 类 `string` 可通过下列形式提供: `{width}:{height}`,例如: `16:9` 或者说 `3:4`。 。 。 . A 类 `number` 也可以提供,在构建时间计算出宽比时有用. 这可以是内置数字, 如 `1.777` 或作为JSX的表达方式 `aspectRatio={16/9}`。 。 。 . 用于远程图像,包括图像 `public/`, (中文(简体) ), `aspectRatio` 要求确保正确无误 `height` 可以在构建时计算. #### 格式 **类型 :** `Array<'avif' | 'jpeg' | 'png' | 'webp'>` **默认 :** `undefined` 在被优化的图像中使用的输出格式. 如果没有提供, `webp` 财务报告和审定财务报表 `avif` 将会在原始图像格式之外使用. 用于远程图像,包括图像 `public/`,原始图像格式未知。 未提供,仅限 `webp` 财务报告和审定财务报表 `avif` 将被使用. #### 背景情况 **类型 :** `ColorDefinition` **默认 :** `undefined` > 默认 Squoosh 服务不支持此功能 。 见 [安装部分](https://npmcn.com/package/%40astrojs/image/#readme-installing-sharp-optional) 详细情况 `sharp` 相反,服务. 用于替换 Alpha 通道的背景颜色 `sharp`是因为 `flatten` 方法。 如果输出格式 不支持透明度(即:. `jpeg`),最好包含背景颜色,否则会使用黑色 作为透明像素的默认替换. 参数接受 `string` 作为价值. 参数可以是 [命名为 HTML 颜色](https://www.w3schools.com/tags/ref_colornames.asp)十六进制 格式中3或6个十六进制字符的颜色代表 `#123[abc]`,或格式中的 RGB 定义 `rgb(100,100,100)`。 。 。 . #### 合适的 **类型 :** `'cover' | 'contain' | 'fill' | 'inside' | 'outside'` **默认 :** `'cover'` > 默认 Squoosh 服务不支持此功能 。 见 [安装部分](https://npmcn.com/package/%40astrojs/image/#readme-installing-sharp-optional) 详细情况 `sharp` 相反,服务。 更多信息 [怎么样 `sharp` 调整图像大小](https://sharp.pixelplumbing.com/api-resize)。 。 。 . 如何调整图像大小以适应两者 `height` 财务报告和审定财务报表 `width`。 。 。 . #### 职位 **类型 :** `'top' | 'right top' | 'right' | 'right bottom' | 'bottom' | 'left bottom' | 'left' | 'left top' | 'north' | 'northeast' | 'east' | 'southeast' | 'south' | 'southwest' | 'west' | 'northwest' | 'center' | 'centre' | 'cover' | 'entropy' | 'attention'` **默认 :** `'centre'` > 默认 Squoosh 服务不支持此功能 。 见 [安装部分](https://npmcn.com/package/%40astrojs/image/#readme-installing-sharp-optional) 详细情况 `sharp` 相反,服务。 更多信息 [怎么样 `sharp` 调整图像大小](https://sharp.pixelplumbing.com/api-resize)。 。 。 . 合适时作物的位置 `cover` 或者说 `contain`。 。 。 . ### `getImage` 这是用于 `` 要构建的组件 `` 的属性。 此帮助可以直接用于当前不支持的更复杂的使用大小写 `` 组件. 此帮助对象的属性与 `` 组件并返回带有属性的对象,该属性应包含在最后 `` 键. 如果您需要在页面添加预装链接, 这会有所帮助 ``。 。 。 . ```astro --- import { getImage } from '@astrojs/image'; const { src } = await getImage({ src: import('../assets/hero.png'), alt: 'My hero image', }); --- ``` ### `getPicture` 这是用于 `` 为响应图像构建多大小和格式的组件。 此帮助可以直接用于当前不支持的更复杂的使用大小写 `` 组件. 此帮助对象的属性与 `` 组件并返回最终文本中应当包含的对象属性 `` 元素 **财务报告和审定财务报表** 一份清单,列出应当用于实现所有 ``s 用于 `` 键. ## 配置 集成可以配置为使用不同的图像服务运行,无论是主机图像服务还是本地运行的完整图像变压器或SSR部署. > 在开发期间,当地图像可能尚未公布,而且无法提供托管图像服务。 本地图像在使用时总是使用内置图像服务 `astro dev`。 。 。 . ### 配置. 服务 EntryPoint 这个 `serviceEntryPoint` 应决心提供从国家预防机制安装的图像服务。 默认切入点是 `@astrojs/image/squoosh`,它解决了从此集成输出的切入点 `package.json`。 。 。 . ```js // astro.config.mjs import { defineConfig } from 'astro/config'; import image from '@astrojs/image'; export default defineConfig({ integrations: [ image({ // Example: The entrypoint for a third-party image service installed from NPM serviceEntryPoint: 'my-image-service/astro.js', }), ], }); ``` ### 配置.log 级别 这个 `logLevel` 控制可用于控制构建过程中整合记录的详细信息。 这可能有益于追踪一个需要很长时间才能建立的具体图像或转变. ```js // astro.config.mjs import { defineConfig } from 'astro/config'; import image from '@astrojs/image'; export default defineConfig({ integrations: [ image({ // supported levels: 'debug' | 'info' | 'warn' | 'error' | 'silent' // default: 'info' logLevel: 'debug', }), ], }); ``` ### 配置( C). cacheDir 在静态构建过程中,集成会缓存被转换的图像来避免为每一个构建重建相同的图像. 如果您正在使用一个托管服务, 允许您为未来的部署缓存构建资产, 这将特别有帮助 . 本地图像将被缓存1年, 当修改了原始图像文件时无效 。 远程图像将根据 `fetch()` 响应的缓存头,类似于 CDN 如何管理缓存. 默认情况下,转换后图像将被缓存到 `./node_modules/.astro/image`。这可以在集成配置选项中配置. ```js // astro.config.mjs import { defineConfig } from 'astro/config'; import image from '@astrojs/image'; export default defineConfig({ integrations: [ image({ // may be useful if your hosting provider allows caching between CI builds cacheDir: './.cache/image', }), ], }); ``` 缓存也可以通过使用 `cacheDir: false`。 。 。 . ## 实例 ### 本地图像 您工程中的图像文件 `src/` 目录可以在前置中导入并直接传递到 `` 作为 `src=` 属性值. `alt` 还需要这样做. 所有其他属性都是可选的,如果不提供则默认为原始图像文件属性. ```astro --- import { Image } from '@astrojs/image/components'; import heroImage from '../assets/hero.png'; --- // optimized image, keeping the original width, height, and image format descriptive text // height will be recalculated to match the original aspect ratio descriptive text // cropping to a specific width and height descriptive text // cropping to a specific aspect ratio and converting to an avif format descriptive text // image imports can also be inlined directly descriptive text ``` #### 图像在 `/public` 这个 `` 组件也可以用于存储在 `public/` 目录和 `src=` 属性相对于公共文件夹。 它将被视作一个远程图像, 这需要两个 `width` 财务报告和审定财务报表 `height`,或一个维度和一个 `aspectRatio` 属性. 您的原始图像将被复制到构建文件夹中, 就像所有位于公共/ 的文件一样, Astro 的图像集成也将返回图像的优化版本 . 例如,使用位于 `public/social.png` 静态或SSR结构 ```astro --- import { Image } from '@astrojs/image/components'; import socialImage from '/social.png'; --- // In static builds: the image will be built and optimized to `/dist`. // In SSR builds: the image will be optimized by the server when requested by a browser. descriptive text ``` ### 远程图像 远程图像可随 `` 组件。 这个 `` 组成部分需要了解联合国 `` 元素,以避免内容布局变化。 对于远程图像,这意味着您必须提供 `width` 财务报告和审定财务报表 `height`,或其中一个维度加所需维度 `aspectRatio`。 。 。 . ```astro --- import { Image } from '@astrojs/image/components'; const imageUrl = 'https://astro.build/assets/press/full-logo-dark.png'; --- // cropping to a specific width and height descriptive text // height will be recalculated to match the aspect ratio descriptive text ``` ### 响应相片 这个 `` 组件可以用来自动构建一个 `` 有多个大小和格式。 检查出来 [MDN 数据](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#art_direction) 深度潜入反应图像和艺术方向. 默认情况下,图片将包含格式 `avif` 财务报告和审定财务报表 `webp`。仅用于本地图像,图像的原始格式也将包含在内. 对于远程图像, a `aspectRatio` 要求确保正确无误 `height` 可以在构建时计算. ```astro --- import { Picture } from '@astrojs/image/components'; import hero from '../assets/hero.png'; const imageUrl = 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'; --- // Local image with multiple sizes // Remote image (aspect ratio is required) // Inlined imports are supported ``` ### 设置默认值 目前,无法为所有人指定默认值 `` 财务报告和审定财务报表 `` 组件。 应在每个组成部分上设定必要的属性. 作为一种替代品,你可以将这些组件包入另一个Astro组件以再利用. 例如,您可以为您的博客文章图像创建组件 : ```astro --- import { Picture } from '@astrojs/image/components'; const { src, ...attrs } = Astro.props; --- ``` ### 使用 `` 图像集成 官方图像集成将改变图像导入,以返回对象而不是源字符串. 该对象有以下属性,由导入文件所衍生: 1 ```ts { src: string; width: number; height: number; format: 'avif' | 'gif' | 'heic' | 'heif' | 'jpeg' | 'jpg' | 'png' | 'tiff' | 'webp'; } ``` 如果您安装了图像集成,请参考 `src` 对象的属性 ``。 。 。 . ```astro --- import rocket from '../images/rocket.svg'; --- A rocketship in space. ``` 或者,添加 `?url` 以返回源字符串. ```astro --- import rocket from '../images/rocket.svg?url'; --- A rocketship in space. ``` ## 解决问题 - 如果您的安装似乎不起作用, 请尝试重新启动 dev 服务器 . - 如果您编辑并保存一个文件而未看到您的网站相应更新, 请尝试刷新页面 . - 如果刷新页面不会更新您的预览,或者如果一个新的安装似乎没有工作,那么重新启动dev服务器. 帮我看看 `#support` 频道打开 [解析器](https://astro.build/chat)我们友好的支援队成员来帮忙! 你也可以检查我们 [Astro 集成文档](https://docs.astro.build/en/guides/integrations-guide/) 更多关于融合. ## 捐款 这个包由Astro的核心团队维护. 欢迎你提交一个问题或公关! ## 更改日志 见 [变动情况](https://npmcn.com/package/%40astrojs/image/CHANGELOG.md) 以了解这种融合的变化历史. ## 常见问题 ### @astrojs/image 是什么？ 在您的 Astro 站点装入并转换图像注意：该包已被作者标记为弃用——@astrojs/image is deprecated in favor of astro:assets\. Please see the migration guide for more information: https://docs\.astro\.build/en/guides/upgrade-to/v3/\\\#removed-astrojsimage ### 如何安装 @astrojs/image？ 在项目目录运行 npm install @astrojs/image，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：astro（^2\.10\.15）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @astrojs/image 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @astrojs/image 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @astrojs/image 可以商用吗？ @astrojs/image 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @astrojs/image 的下载量有多少？ 根据 npm 官方下载统计，@astrojs/image 在 2026/10/07 – 2026/11/05 这 30 天内被下载 5,406 次，日均约 180 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @astrojs/image 还在维护吗？ 最新版本 0\.18\.0 发布于 2023/08/30（3 年前）；至今共发布 116 个版本，其中过去 12 个月发布了 0 个；首次发布于 2022/07/01。作者已将其标记为弃用，新项目建议寻找替代方案。