Astro Dev Server Errors when Dynamically Importing Images - Missing Image Dimensions & Unable to Retrieve Remote Image Dimensions

[HunterCarrollBailey]

📚 Subject area/topic

Recipes

📋 Page(s) affected (or suggested, for new content)

Dynamically Import Images

📋 Description of content that is out-of-date or incorrect

Error The First

Dynamically importing issues following Dynamically Import Images results in a MissingImageDimensions error. I am using the same code as listed in the documentation, with a few small alterations as you can see below.

Gallery Component

---
import GalleryCard from "./GalleryCard.astro";
---

<div class="gallery">
  <div class="gallery-container">
    <div class="gallery-container-content">
      <h2 class="gallery-container-content-h2">My Gallery</h2>
      <p class="gallery-container-content-p">
        My Content Here
      </p>
      <h2 class="gallery-container-content-h2">Featured Images</h2>
      <div class="gallery-container-content-sections">
        <div class="gallery-container-content-sections-featured">
            <GalleryCard  imagePath="/src/media/AlkiBeach-1.jpg" alt="AlkiBeach"/>
        </div>
        <div class="galler-container-content-sections-other"></div>
      </div>
    </div>
  </div>
</div>

Gallery Card Component

---
import type { ImageMetadata } from "astro";
import { Image } from "astro:assets";
interface Props {
  imagePath: string;
  alt: string;
}
const { imagePath, alt } = Astro.props;
const images = import.meta.glob<{ default: ImageMetadata }>(
  "/src/media/*.{jpeg,jpg,png,gif}"
);
if (!images[imagePath])
  throw new Error(
    `"${imagePath}" does not exist in glob: "src/media/*.{jpeg,jpg,png,gif}"`
  );
---

<div class="card">
  <div class="card-body">
    <Image src={imagePath} alt={alt} class="gallery-img" />
  </div>
  <div class="card-footer">My Footer</div>
</div>

Error The Second

When using the suggestion of inferSize={true} the system pops up with a different error of FailedToFetchRemoteImageDimensions

Gallery Card Component

---
import type { ImageMetadata } from "astro";
import { Image } from "astro:assets";
interface Props {
  imagePath: string;
  alt: string;
}
const { imagePath, alt } = Astro.props;
const images = import.meta.glob<{ default: ImageMetadata }>(
  "/src/media/*.{jpeg,jpg,png,gif}"
);
if (!images[imagePath])
  throw new Error(
    `"${imagePath}" does not exist in glob: "src/media/*.{jpeg,jpg,png,gif}"`
  );
---

<div class="card">
  <div class="card-body">
    <Image src={imagePath} alt={alt} class="gallery-img" inferSize={true}/>
  </div>
  <div class="card-footer">My Footer</div>
</div>

🖥️ Reproduction in StackBlitz (if reporting incorrect content or code samples)

No response

[HunterCarrollBailey]

I was able to resolve the issue by adding height and width to the Gallery Card component

<Image src={imagePath} alt={alt} class="gallery-img" height={100} width={100}/>

Thankfully I have images sized in my scss but there should be an update to the documentation examples that incorporates that information.

[sarah11918]

Closing as we have not had other problems with this recipe, and adding width and height should not be required in this situation. If there is an error, it may be an issue with Astro to fix or with local code, but the documentation is documenting the intended usage.