跳转到内容

构建自定义图像组件

Astro 提供了两个内置组件,可用于显示和优化图像。<Picture> 组件允许你显示响应式图像,并处理不同的格式和尺寸;而<Image> 组件则会优化你的图像,并允许你传入不同的格式和质量属性。

当你需要使用一些 <Picture><Image> 组件目前不支持的选项时,你可以使用 getImage() 函数来创建自定义组件。

在本示例中,你将使用 getImage() 函数 来创建自己的自定义图像组件,该组件基于媒体查询显示不同的源图像。

操作步骤

  1. 创建一个新的 Astro 组件,并导入 getImage() 函数

    src/components/MyCustomImageComponent.astro
    ---
    import { getImage } from "astro:assets";
    ---
  2. 创建一个新的组件来处理自定义图片。MyCustomComponent.astro 将会从 Astro.props 中接收到三个 propsmobileImgUrldesktopImgUrl 属性用于在不同的视口尺寸下创建图片,而 alt 属性用于设置图片的替代(alt)文本。这些属性将会在你渲染自定义图片组件的任何地方被传递。添加以下导入语句并定义你在组件中将使用的属性,你也可以使用 TypeScript 为属性添加类型定义。

    src/components/MyCustomImageComponent.astro
    ---
    import type { ImageMetadata } from "astro";
    import { getImage } from "astro:assets";
    interface Props {
    mobileImgUrl: string | ImageMetadata;
    desktopImgUrl: string | ImageMetadata;
    alt: string;
    }
    const { mobileImgUrl, desktopImgUrl, alt } = Astro.props;
    ---
  3. 结合你需要的属性并调用 getImage() 函数来定义每个响应式图片。

    src/components/MyCustomImageComponent.astro
    ---
    import type { ImageMetadata } from "astro";
    import { getImage } from "astro:assets";
    interface Props {
    mobileImgUrl: string | ImageMetadata;
    desktopImgUrl: string | ImageMetadata;
    alt: string;
    }
    const { mobileImgUrl, desktopImgUrl, alt } = Astro.props;
    const mobileImg = await getImage({
    src: mobileImgUrl,
    format: "webp",
    width: 200,
    height: 200,
    });
    const desktopImg = await getImage({
    src: desktopImgUrl,
    format: "webp",
    width: 800,
    height: 200,
    });
    ---
  4. 创建一个 <picture> 元素,它根据你期望的媒体查询生成包含不同图片的 srcset

    src/components/MyCustomImageComponent.astro
    ---
    import type { ImageMetadata } from "astro";
    import { getImage } from "astro:assets";
    interface Props {
    mobileImgUrl: string | ImageMetadata;
    desktopImgUrl: string | ImageMetadata;
    alt: string;
    }
    const { mobileImgUrl, desktopImgUrl, alt } = Astro.props;
    const mobileImg = await getImage({
    src: mobileImgUrl,
    format: "webp",
    width: 200,
    height: 200,
    });
    const desktopImg = await getImage({
    src: desktopImgUrl,
    format: "webp",
    width: 800,
    height: 200,
    });
    ---
    <picture>
    <source media="(max-width: 799px)" srcset={mobileImg.src} />
    <source media="(min-width: 800px)" srcset={desktopImg.src} />
    <img src={desktopImg.src} alt={alt} />
    </picture>
  5. 在任意 .astro 文件中导入并使用 <MyCustomImageComponent /> 组件。确保传递了在不同视口大小下生成两个不同图片所需的属性:

    src/pages/index.astro
    ---
    import MyCustomImageComponent from "../components/MyCustomImageComponent.astro";
    import mobileImage from "../images/mobile-profile-image.jpg";
    import desktopImage from "../images/desktop-profile-image.jpg";
    ---
    <MyCustomImageComponent
    mobileImgUrl={mobileImage}
    desktopImgUrl={desktopImage}
    alt="user profile picture"
    />