Astro Image Examples

This page demonstrates the usage of the Astro <Image> & <Picture> components with examples. The source code for all these examples can be found here.

Note: Images placed in /public can still be used with both components, an unprocessed copy of the original image will be moved to the build folder.

Local Image.

Here is an basic example using a local image, the location of which can be found in src/assets, and the image source found here.

<Image>

<Code>

---
import { Image } from "astro:assets";
// example local image
import astroImg from "../../assets/astro-logo.png";
---

<Image alt="Astro logo" src={astroImg} />

<style>
  /* Make images easier to work with */
  img {
    display: block;
    max-width: 100%;
    height: auto;
  }
</style>

<Code>

---
import { Picture } from "astro:assets";
// example local image
import astroImg from "../../assets/astro-logo.png";
---

<Picture alt="Astro logo" src={astroImg} widths={[astroImg.width / 2, astroImg.width]} />

<style>
  /* Make images easier to work with */
  img {
    display: block;
    max-width: 100%;
    height: auto;
  }
</style>

External Image.

The following are basic examples of referencing an external image, found @ astro.build/press.

<Image>

<Code>

---
import { Image } from "astro:assets";
---

<Image
  alt="Astro logo"
  src="https://astro.build/assets/press/astro-logo-light-gradient.png"
  inferSize
/>

<style>
  /* Make images easier to work with */
  img {
    display: block;
    max-width: 100%;
    height: auto;
  }
</style>

<Code>

---
import { Picture } from "astro:assets";
---

<Picture
  alt="Astro logo"
  src="https://astro.build/assets/press/astro-logo-light-gradient.png"
  inferSize
/>

<style>
  /* Make images easier to work with */
  img {
    display: block;
    max-width: 100%;
    height: auto;
  }
</style>