Fix Formatting and Update Dynamic Image Import Recipe for Vite 5 (#5898)

* 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>
withastro · Jan 26, 2024 · 003ec19 · 003ec19
1 parent bedb1ac
commit 003ec19
Showing 1 changed file with 74 additions and 69 deletions.
diff --git a/src/content/docs/en/recipes/dynamically-importing-images.mdx b/src/content/docs/en/recipes/dynamically-importing-images.mdx
@@ -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>
@@ -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>
@@ -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`.