Handle errors in dynamic image import recipe about docs HOT 5 CLOSED

As someone who's new to Astro and who came across this today, I'd vote for 3 as well as it would give me the choice to decide how I want to handle it.

from docs.

I can add this shortly!

from docs.

I think I like including the built-in logic for the error with the if statement. I say go with that! @VoxelMC

from docs.

As someone who's new to Astro and who came across this today, I'd vote for 3 as well as it would give me the choice to decide how I want to handle it.

Perfect - I will make that PR now for review! Please feel free to have a look

from docs.

@Princesseuh Sorry to bother you, but I just want to ensure this is correct!
About your comment here: #5898 (comment)

Reference to PR: #5898

So, as the import.meta.glob function returns an object with path: Function pairs, if you access a path that isn't there, the function can't be called. Here are the three strategies I would use to tackle this, and let me know which makes more sense for Astro.

1. Nullish Coalesce the function, then call it later:

This makes more sense if you can use a default image.

---
const { imagePath, ... } = Astro.props;
const images = import.meta.glob<{ default: ImageMetadata }>('src/assets/*.{jpeg,jpg,png,gif}');
const loadImage = images[imagePath] ?? images['src/assets/default-image.png'];
---
<Image src={ loadImage() } alt={...} />

2. Conditionally Render the image:

If it's better not to have the image at all.

---
const { imagePath, ... } = Astro.props;
const images = import.meta.glob<{ default: ImageMetadata }>('src/assets/*.{jpeg,jpg,png,gif}');
const loadImage = images[imagePath];
---
{ loadImage && <Image src={ loadImage() } alt={...} /> }

3. Just throw an error:

---
const { imagePath, ... } = Astro.props;
const images = import.meta.glob<{ default: ImageMetadata }>('src/assets/*.{jpeg,jpg,png,gif}');
if (!images[imagePath]) throw new Error("Image not found in glob pattern: src/assets/*.{jpeg,jpg,png,gif}");
---
<Image src={ images[imagePath]() } alt={...} />

Alternatively, I could just leave it to the reader and put this in a :::warning block:

---
const { imagePath, ... } = Astro.props;
const images = import.meta.glob<{ default: ImageMetadata }>('src/assets/*.{jpeg,jpg,png,gif}');
// if imagePath is not a valid file in the glob, images[imagePath]() will log an error.
---
<Image src={ images[imagePath]() } alt={...} />

@sarah11918 I would also greatly appreciate your opinion on this :)

from docs.