Skip to content

Commit

Permalink
Fix Formatting and Update Dynamic Image Import Recipe for Vite 5 (#5898)
Browse files Browse the repository at this point in the history
* Fixes formatting and update according to v4

* Update src/content/docs/en/recipes/dynamically-importing-images.mdx

---------

Co-authored-by: Reuben Tier <64310361+TheOtterlord@users.noreply.github.com>
  • Loading branch information
2 people authored and ematipico committed Jan 26, 2024
1 parent bedb1ac commit 003ec19
Showing 1 changed file with 74 additions and 69 deletions.
143 changes: 74 additions & 69 deletions src/content/docs/en/recipes/dynamically-importing-images.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,77 +14,80 @@ In this recipe, you will learn how to dynamically import your images using Vite'

1. Create a new `assets` folder under the `src` directory and add your images inside that new folder.

<FileTree>
- src/
- assets/
- avatar-1.jpg
- avatar-2.png
- avatar-3.jpeg
</FileTree>

:::note
`assets` is a popular folder name convention for placing images but you are free to name the folder whatever you like.
:::
<FileTree>
- src/
- assets/
- avatar-1.jpg
- avatar-2.png
- avatar-3.jpeg
</FileTree>

:::note
`assets` is a popular folder name convention for placing images but you are free to name the folder whatever you like.
:::

2. Create a new Astro component for your card and import the `<Image />` component.

```astro title="src/components/MyCustomCardComponent.astro"
---
import { Image } from 'astro:assets';
import { Image } from 'astro:assets';
---
```

3. Specify the `props` that your component will receive in order to display the necessary information on each card. You can optionally define their types, if you are using TypeScript in your project.

```astro title="src/components/MyCustomCardComponent.astro" ins={4-11}
---
import { Image } from 'astro:assets';
import { Image } from 'astro:assets';
interface Props {
imagePath: string;
altText: string;
name: string;
age: number;
}
interface Props {
imagePath: string;
altText: string;
name: string;
age: number;
}
const { imagePath, altText, name, age } = Astro.props;
const { imagePath, altText, name, age } = Astro.props;
---
```

4. Create a new `images` variable and use the `import.meta.glob` function which returns an object of all of the image paths inside the `assets` folder.
4. Create a new `images` variable and use the `import.meta.glob` function which returns an object of all of the image paths inside the `assets` folder. You will also need to import `ImageMetadata` type to help define the type of the `images` variable.

```astro title="src/components/MyCustomCardComponent.astro" ins={12}
```astro title="src/components/MyCustomCardComponent.astro" ins={2, 13} "ImageMetadata"
---
import { Image } from 'astro:assets';
interface Props {
imagePath: string;
altText: string;
name: string;
age: number;
}
const { imagePath, altText, name, age } = Astro.props;
const images = import.meta.glob('/src/assets/*.{jpeg,jpg,png,gif}')
import type { ImageMetadata } from 'astro';
import { Image } from 'astro:assets';
interface Props {
imagePath: string;
altText: string;
name: string;
age: number;
}
const { imagePath, altText, name, age } = Astro.props;
const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/*.{jpeg,jpg,png,gif}')
---
```


5. Use the props to create the markup for your card component.

```astro title="src/components/MyCustomCardComponent.astro" ins={14-18}
```astro title="src/components/MyCustomCardComponent.astro" ins={16-20}
---
import { Image } from 'astro:assets';
interface Props {
imagePath: string;
altText: string;
name: string;
age: number;
}
const { imagePath, altText, name, age } = Astro.props;
// Type: Record<string, () => Promise<{default: ImageMetadata}>>
const images = import.meta.glob('/src/assets/*.{jpeg,jpg,png,gif}')
import type { ImageMetadata } from 'astro';
import { Image } from 'astro:assets';
interface Props {
imagePath: string;
altText: string;
name: string;
age: number;
}
const { imagePath, altText, name, age } = Astro.props;
// Type: Record<string, () => Promise<{default: ImageMetadata}>>
const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/*.{jpeg,jpg,png,gif}')
---
<div class="card">
<h2>{name}</h2>
Expand All @@ -95,19 +98,21 @@ In this recipe, you will learn how to dynamically import your images using Vite'

6. Inside the `src` attribute, pass in the `images` object and use bracket notation for the image path. Then make sure to invoke the glob function.

```astro title="src/components/MyCustomCardComponent.astro" ins={17}
```astro title="src/components/MyCustomCardComponent.astro" ins="images[imagePath]()"
---
import { Image } from 'astro:assets';
interface Props {
imagePath: string;
altText: string;
name: string;
age: number;
}
const { imagePath, altText, name, age } = Astro.props;
const images = import.meta.glob('/src/assets/*.{jpeg,jpg,png,gif}')
import type { ImageMetadata } from 'astro';
import { Image } from 'astro:assets';
interface Props {
imagePath: string;
altText: string;
name: string;
age: number;
}
const { imagePath, altText, name, age } = Astro.props;
const images = import.meta.glob<{ default: ImageMetadata }>('/src/assets/*.{jpeg,jpg,png,gif}')
---
<div class="card">
<h2>{name}</h2>
Expand All @@ -116,19 +121,19 @@ In this recipe, you will learn how to dynamically import your images using Vite'
</div>
```

:::note
`images` is an object that contains all of the image paths inside the `assets` folder.
:::note
`images` is an object that contains all of the image paths inside the `assets` folder.

```js
const images = {
'./assets/avatar-1.jpg': () => import('./assets/avatar-1.jpg'),
'./assets/avatar-2.png': () => import('./assets/avatar-2.png'),
'./assets/avatar-3.jpeg': () => import('./assets/avatar-3.jpeg')
}
```
```js
const images = {
'./assets/avatar-1.jpg': () => import('./assets/avatar-1.jpg'),
'./assets/avatar-2.png': () => import('./assets/avatar-2.png'),
'./assets/avatar-3.jpeg': () => import('./assets/avatar-3.jpeg')
}
```

The `imagePath` prop is a string that contains the path to the image that you want to display. The `import.meta.glob()` is doing the work of finding the image path that matches the `imagePath` prop and handling the import for you.
:::
The `imagePath` prop is a string that contains the path to the image that you want to display. The `import.meta.glob()` is doing the work of finding the image path that matches the `imagePath` prop and handling the import for you.
:::

7. Import and use the card component inside an Astro page, passing in the values for the `props`.

Expand Down

0 comments on commit 003ec19

Please sign in to comment.