@astrojs/image

中文文档

0.18.0发布于 2023/08/30MITTypeScriptES Module近 30 天下载 5406

在您的 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

文档目录24 节

为什么 @astrojs/image ? 吗?
安装
快速安装
手动安装
安装 sharp (可选)
更新 env.d.ts
使用量
<Image />
<Picture />
getImage
getPicture
配置
配置. 服务 EntryPoint
配置.log 级别
配置( C). cacheDir
实例
本地图像
远程图像
响应相片
设置默认值
使用 <img> 图像集成
解决问题
捐款
更改日志

@astrojs/图像qq

在Astro v3.0 (Fall 2023)中,这种整合将被贬低,有利于 astro:assets 模块。请看资产文件更多信息.

这个 Astro 集成系统 优化您的图像 Astro项目Astro v2 中只支持所有静态站点和一些服务器侧渲染部署主机。。。 .

为什么 @astrojs/image? 吗?
安装
使用量
调试
配置
实例
解决问题
捐款
更改日志

为什么 `@astrojs/image`? 吗?

图像在整体站点性能和可用性中起很大作用. 使用适当的尺寸图像可以改变一切,但往往难以自动化.

这种一体化提供 <Image /> 财务报告和审定财务报表 <Picture> 以及一个基本的图像变压器,并全力支持静态站点和服务器侧渲染。内置的图像变压器也是可替换的,打开了未来与您最喜爱的托管图像服务相配合的集成的大门.

安装

与我们的整合,我们建议安装锐口在适当情况下.

这个 @astrojs/image 默认图像变压器基于斯库什语Name 并使用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"(意为"是"),每个字.

# Using NPM
npx astro add image
# Using Yarn
yarn astro add image
# Using PNPM
pnpm astro add image

如果你遇到任何问题, 你可以在GitHub上向我们报告并尝试下面的人工安装步骤.

手动安装

首先,安装 @astrojs/image 使用您的软件包管理器的软件包。如果你用npm或不确定, 在终端运行这个:

npm install @astrojs/image

然后,把这个整合到您的 astro.config.* 使用 integrations 属性 :

// astro.config.mjs
import { defineConfig } from 'astro/config';
import image from '@astrojs/image';

export default defineConfig({
  // ...
  integrations: [image()],
});

安装 `sharp` (可选)

首先,安装 sharp 使用您的软件包管理器的软件包。如果你用npm或不确定, 在终端运行这个:

npm install sharp

那么,更新你的整合 astro.config.* 要使用内置文件的文件 sharp 图像变压器.

// 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 文档.

// Replace `astro/client` with `@astrojs/image/client`
/// <reference types="@astrojs/image/client" />

或者,或者,如果你的项目正在通过一个 tsconfig.json

{
  "compilerOptions": {
    // Replace `astro/client` with `@astrojs/image/client`
    "types": ["@astrojs/image/client"]
  }
}

使用量

---
import { Image, Picture } from '@astrojs/image/components';
import heroImage from '../assets/hero.png';
---

// optimized image, keeping the original width, height, and image format
<Image src={heroImage} alt="descriptive text" />

// specify multiple sizes for responsive images or art direction
<Picture
  src={heroImage}
  widths={[200, 400, 800]}
  sizes="(max-width: 800px) 100vw, 800px"
  alt="descriptive text"
/>
---

包含的图像变压器支持图像的再大小并编码到不同的图像格式. 第三方图像服务也能为自定义转换增加支持(例如: blur, (中文(简体) ), filter, (中文(简体) ), rotate(见e/cn.4/sub.2/2002/l.48等).

阿斯特罗 <Image /> 财务报告和审定财务报表 <Picture /> 组件要求 alt 属性,为图像提供描述文本。如果缺少备选案文文本, 将会登录一个警告, 如果没有提供备选案文文本, 将来发布集成将会出错 .

如果图像只是装饰性的(即无助于理解页面),设置 alt="" 这样图像就可以被屏幕阅读器正确理解和忽略.

`<Image />`

内置 <Image /> 组件用于创建优化 <img /> 用于 URL 访问的远程图像以及从您的工程导入的本地图像 src/ 目录.

除了组件特定属性外,任何有效的 HTML 属性 <img /> 列入 <Image /> 构成部分将列入已建 <img />。。。 .

曲线

类型 : string | ImageMetadata | Promise<ImageMetadata>
要求 : 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: 您可以使用 <Image /> 组件在使用 SVG 图像时,但 svg 选项只能当原始图像是 .svg 文档。其他图像格式( 如 .png 或者说 .jpg)不能转换成矢量图像。这个 .svg 图像本身不会被改变,而是最终 <img /> 将适当优化整合.

质量

类型 : number
默认 : undefined

优化时使用的压缩质量。如果不提供图像服务,视图像格式而定,图像服务将使用自己的默认质量.

宽度

类型 : number
默认 : undefined

输出图像的理想宽度。与 height 将图像剪切成精确大小,或 aspectRatio 以自动计算并裁剪高度.

尺寸对本地图像是可选的,如果不提供原始图像大小将使用.

用于远程图像,包括图像 public/,整合需要能够计算出优化图像的维度. 可通过提供 width 财务报告和审定财务报表 height 提供一个维度和一个维度 aspectRatio。。。 .

高度

类型 : number
默认 : undefined

输出图像的理想高度。与 width 将图像剪切成精确大小,或 aspectRatio 以自动计算并裁剪宽度.

尺寸对本地图像是可选的,如果不提供原始图像大小将使用.

方面 Ratio

类型 : number | string
默认 : undefined

输出图像的理想相比。组合到两个 width 或者说 height 以自动计算并裁剪另一个维.

A 类 string 可通过下列形式提供: {width}:{height},例如: 16:9 或者说 3:4。。。 .

A 类 number 也可以提供,在构建时间计算出宽比时有用. 这可以是内置数字, 如 1.777 或作为JSX的表达方式 aspectRatio={16/9}。。。 .

背景情况

类型 : ColorDefinition
默认 : undefined

默认 Squoosh 服务不支持此功能。见安装部分详细情况 sharp 相反,服务.

背景颜色用于在使用时填充剩余背景 contain 联合国 fit 属性.

背景颜色也用于替换 Alpha 通道 sharp是因为 flatten 方法。如果输出格式不支持透明度(即:. jpeg),最好包含背景颜色,否则会使用黑色作为透明像素的默认替换.

参数接受 string 作为价值.

参数可以是命名为 HTML 颜色十六进制格式中3或6个十六进制字符的颜色代表 #123[abc],形式中的 RGB 定义 rgb(100,100,100),形式中的 RGBA 定义 rgba(100,100,100, 0.5)。。。 .

合适的

类型 : 'cover' | 'contain' | 'fill' | 'inside' | 'outside'
默认 : 'cover'

默认 Squoosh 服务不支持此功能。见安装部分详细情况 sharp 相反,服务。更多信息怎么样 sharp 调整图像大小。。。 .

如何调整图像大小以适应两者 height 财务报告和审定财务报表 width。。。 .

职位

默认 Squoosh 服务不支持此功能。见安装部分详细情况 sharp 相反,服务。更多信息怎么样 sharp 调整图像大小。。。 .

合适时作物的位置 cover 或者说 contain。。。 .

`<Picture />`

内置 <Picture /> 组件用于创建优化 <picture /> 用于 URL 访问的远程图像以及从您的工程导入的本地图像 src/ 目录.

除了组件特定属性外,任何有效的 HTML 属性 <img /> 列入 <Picture /> 构成部分将列入已建 <img />。。。 .

曲线

类型 : string | ImageMetadata | Promise<ImageMetadata>
要求 : 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 数据更多细节.

宽度

类型 : number[]
要求 : true

应对响应图像构建的大小列表。这与 aspectRatio 以计算每个已建图像的最终尺寸.

// Builds three images: 400x400, 800x800, and 1200x1200
<Picture src={img} widths={[400, 800, 1200]} aspectRatio="1:1" alt="descriptive text" />

方面 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 服务不支持此功能。见安装部分详细情况 sharp 相反,服务.

用于替换 Alpha 通道的背景颜色 sharp是因为 flatten 方法。如果输出格式不支持透明度(即:. jpeg),最好包含背景颜色,否则会使用黑色作为透明像素的默认替换.

参数接受 string 作为价值.

参数可以是命名为 HTML 颜色十六进制格式中3或6个十六进制字符的颜色代表 #123[abc],或格式中的 RGB 定义 rgb(100,100,100)。。。 .

合适的

类型 : 'cover' | 'contain' | 'fill' | 'inside' | 'outside'
默认 : 'cover'

默认 Squoosh 服务不支持此功能。见安装部分详细情况 sharp 相反,服务。更多信息怎么样 sharp 调整图像大小。。。 .

如何调整图像大小以适应两者 height 财务报告和审定财务报表 width。。。 .

职位

默认 Squoosh 服务不支持此功能。见安装部分详细情况 sharp 相反,服务。更多信息怎么样 sharp 调整图像大小。。。 .

合适时作物的位置 cover 或者说 contain。。。 .

`getImage`

这是用于 <Image /> 要构建的组件 <img /> 的属性。此帮助可以直接用于当前不支持的更复杂的使用大小写 <Image /> 组件.

此帮助对象的属性与 <Image /> 组件并返回带有属性的对象,该属性应包含在最后 <img /> 键.

如果您需要在页面添加预装链接, 这会有所帮助 <head>。。。 .

---
import { getImage } from '@astrojs/image';

const { src } = await getImage({
  src: import('../assets/hero.png'),
  alt: 'My hero image',
});
---

<html>
  <head>
    <link rel="preload" as="image" href={src} alt="alt text" />
  </head>
</html>

`getPicture`

这是用于 <Picture /> 为响应图像构建多大小和格式的组件。此帮助可以直接用于当前不支持的更复杂的使用大小写 <Picture /> 组件.

此帮助对象的属性与 <Picture /> 组件并返回最终文本中应当包含的对象属性 <img /> 元素 财务报告和审定财务报表 一份清单,列出应当用于实现所有 <source>s 用于 <picture> 键.

配置

集成可以配置为使用不同的图像服务运行,无论是主机图像服务还是本地运行的完整图像变压器或SSR部署.

在开发期间,当地图像可能尚未公布,而且无法提供托管图像服务。本地图像在使用时总是使用内置图像服务 astro dev。。。 .

配置. 服务 EntryPoint

这个 serviceEntryPoint 应决心提供从国家预防机制安装的图像服务。默认切入点是 @astrojs/image/squoosh,它解决了从此集成输出的切入点 package.json。。。 .

// 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 控制可用于控制构建过程中整合记录的详细信息。这可能有益于追踪一个需要很长时间才能建立的具体图像或转变.

// 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。这可以在集成配置选项中配置.

// 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/ 目录可以在前置中导入并直接传递到 <Image /> 作为 src= 属性值. alt 还需要这样做.

所有其他属性都是可选的,如果不提供则默认为原始图像文件属性.

---
import { Image } from '@astrojs/image/components';
import heroImage from '../assets/hero.png';
---

// optimized image, keeping the original width, height, and image format
<Image src={heroImage} alt="descriptive text" />

// height will be recalculated to match the original aspect ratio
<Image src={heroImage} width={300} alt="descriptive text" />

// cropping to a specific width and height
<Image src={heroImage} width={300} height={600} alt="descriptive text" />

// cropping to a specific aspect ratio and converting to an avif format
<Image src={heroImage} width={300} aspectRatio="16:9" format="avif" alt="descriptive text" />

// image imports can also be inlined directly
<Image src={import('../assets/hero.png')} alt="descriptive text" />

图像在 `/public`

这个 <Image /> 组件也可以用于存储在 public/ 目录和 src= 属性相对于公共文件夹。它将被视作一个远程图像, 这需要两个 width 财务报告和审定财务报表 height,或一个维度和一个 aspectRatio 属性.

您的原始图像将被复制到构建文件夹中, 就像所有位于公共/ 的文件一样, Astro 的图像集成也将返回图像的优化版本 .

例如,使用位于 public/social.png 静态或SSR结构

---
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.
<Image src={socialImage} width={1280} aspectRatio="16:9" alt="descriptive text" />

远程图像

远程图像可随 <Image /> 组件。这个 <Image /> 组成部分需要了解联合国 <img /> 元素,以避免内容布局变化。对于远程图像,这意味着您必须提供 width 财务报告和审定财务报表 height,或其中一个维度加所需维度 aspectRatio。。。 .

---
import { Image } from '@astrojs/image/components';

const imageUrl = 'https://astro.build/assets/press/full-logo-dark.png';
---

// cropping to a specific width and height
<Image src={imageUrl} width={750} height={250} format="avif" alt="descriptive text" />

// height will be recalculated to match the aspect ratio
<Image src={imageUrl} width={750} aspectRatio={16 / 9} format="avif" alt="descriptive text" />

响应相片

这个 <Picture /> 组件可以用来自动构建一个 <picture> 有多个大小和格式。检查出来 MDN 数据深度潜入反应图像和艺术方向.

默认情况下,图片将包含格式 avif 财务报告和审定财务报表 webp。仅用于本地图像,图像的原始格式也将包含在内.

对于远程图像, a aspectRatio 要求确保正确无误 height 可以在构建时计算.

---
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
<Picture
  src={hero}
  widths={[200, 400, 800]}
  sizes="(max-width: 800px) 100vw, 800px"
  alt="descriptive text"
/>

// Remote image (aspect ratio is required)
<Picture
  src={imageUrl}
  widths={[200, 400, 800]}
  aspectRatio="4:3"
  sizes="(max-width: 800px) 100vw, 800px"
  alt="descriptive text"
/>

// Inlined imports are supported
<Picture
  src={import('../assets/hero.png')}
  widths={[200, 400, 800]}
  sizes="(max-width: 800px) 100vw, 800px"
  alt="descriptive text"
/>

设置默认值

目前,无法为所有人指定默认值 <Image /> 财务报告和审定财务报表 <Picture /> 组件。应在每个组成部分上设定必要的属性.

作为一种替代品,你可以将这些组件包入另一个Astro组件以再利用. 例如,您可以为您的博客文章图像创建组件 :

---
import { Picture } from '@astrojs/image/components';

const { src, ...attrs } = Astro.props;
---

<Picture src={src} widths={[400, 800, 1500]} sizes="(max-width: 767px) 100vw, 736px" {...attrs} />

<style>
  img,
  picture :global(img),
  svg {
    margin-block: 2.5rem;
    border-radius: 0.75rem;
  }
</style>

使用 `<img>` 图像集成

官方图像集成将改变图像导入,以返回对象而不是源字符串. 该对象有以下属性,由导入文件所衍生: 1

{
  src: string;
  width: number;
  height: number;
  format: 'avif' | 'gif' | 'heic' | 'heif' | 'jpeg' | 'jpg' | 'png' | 'tiff' | 'webp';
}

如果您安装了图像集成,请参考 src 对象的属性 <img>。。。 .

---
import rocket from '../images/rocket.svg';
---

<img src={rocket.src} alt="A rocketship in space." />

或者,添加 ?url 以返回源字符串.

---
import rocket from '../images/rocket.svg?url';
---

<img src={rocket} alt="A rocketship in space." />

解决问题

如果您的安装似乎不起作用, 请尝试重新启动 dev 服务器 .
如果您编辑并保存一个文件而未看到您的网站相应更新, 请尝试刷新页面 .
如果刷新页面不会更新您的预览,或者如果一个新的安装似乎没有工作,那么重新启动dev服务器.

帮我看看 #support 频道打开解析器我们友好的支援队成员来帮忙!

你也可以检查我们 Astro 集成文档更多关于融合.

捐款

这个包由Astro的核心团队维护. 欢迎你提交一个问题或公关!

更改日志

见变动情况以了解这种融合的变化历史.

版本与发布记录

@astrojs/image 共发布 116 个版本，首次发布于 2022/07/01；过去 12 个月发布了 0 个版本。

版本	发布日期	距今
`0.18.0`latest	2023/08/30	3 年前
`1.0.0-beta.0`	2023/08/03	3 年前
`0.17.3`	2023/08/03	3 年前
`0.17.2`	2023/07/03	3 年前
`0.17.1`	2023/06/22	3 年前
`0.17.0`	2023/06/06	3 年前

其他发布通道：next--rc → 0.0.0-rc-20220726043527，next--wasm → 0.0.0-wasm-20220922161614，next--imgcache → 0.0.0-imgcache-20220929145446，next--monorepos → 0.0.0-monorepos-20221010034923，next--node-standalone → 0.0.0-node-standalone-20221011210529，next--hmr-recovery → 0.0.0-hmr-recovery-20221027125930。

关于 @astrojs/image 的常见问题

@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。作者已将其标记为弃用，新项目建议寻找替代方案。

npm install @astrojs/image

pnpmpnpm add @astrojs/image
yarnyarn add @astrojs/image
bunbun add @astrojs/image

peer 依赖astro ^2.10.15sharp >=0.31.0可选

npm 7+ 与 pnpm 8+ 会自动安装必需的 peer 依赖，Yarn 需手动安装。

在你的项目目录中运行此命令。

近 30 天下载

5,406

约 5406 次日均 180 次

统计周期 2026/10/07 – 2026/11/05
数据来自 npm 官方下载统计，今天更新

最新版本0.18.0发布于 3 年前

开源许可MIT宽松许可

包体积7.5 MB99 个文件 · 解压后

运行依赖6 个另有 2 个 peer 依赖

模块格式ES Module

TypeScript自带类型

发布版本116 个近 12 个月 0 个

首次发布2022/07/014 年前

元数据更新2025/09/19

每一个软件包背后，
都有分享与创造的人。

@astrojs/image

@astrojs/图像qq

为什么 @astrojs/image? 吗?

安装

快速安装

手动安装

安装 sharp (可选)

更新 env.d.ts

使用量

<Image />

曲线

备选案文

格式

质量

宽度

高度

方面 Ratio

背景情况

合适的

职位

<Picture />

曲线

备选案文

大小

宽度

方面 Ratio

格式

背景情况

合适的

职位

getImage

getPicture

配置

配置. 服务 EntryPoint

配置.log 级别

配置( C). cacheDir

实例

本地图像

图像在 /public

远程图像

响应相片

设置默认值

使用 <img> 图像集成

解决问题

捐款

更改日志

版本与发布记录

关于 @astrojs/image 的常见问题

@astrojs/image 是什么？

如何安装 @astrojs/image？

@astrojs/image 支持 TypeScript 吗？

@astrojs/image 支持 ESM 还是 CommonJS？

@astrojs/image 可以商用吗？

@astrojs/image 的下载量有多少？

@astrojs/image 还在维护吗？

为什么 `@astrojs/image`? 吗?

安装 `sharp` (可选)

更新 `env.d.ts`

`<Image />`

`<Picture />`

`getImage`

`getPicture`

图像在 `/public`

使用 `<img>` 图像集成