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.