Getting error "'aspectRatio' must be provided for remote images" when using a local image

Question

Getting an error of 'aspectRatio' must be provided for remote images when using a local image even when importing in frontmatter when using the @astrojs/image integration. The imported image is in /src/images

As far as I can see this is exactly the same as the example provided in the @astrojs/image docs. I have also even tried the inline import method, but it still hasn't worked.

---
import { Picture } from "@astrojs/image/components";
import florence from "../images/florence-3.jpg";
---

<section class="showcase">
  <div class="showcase-bg">
    <Picture
      src={florence}
      widths={[200, 400, 800]}
      sizes="(max-width: 800px) 100vw, 800px"
      alt="Florence Smith Project Manager Picture"
    />
  </div>
</section>

Thanks for any help!

score 1 · Accepted Answer · answered Dec 21 '22 at 18:12

Here a working example with a code same as yours

Astro SSR with node standalone
Node 16 (Node18 yields a fetch failed issue so not compatible yet with the integration)

see detailed environment in the repo

/pages/picture.astro

---
import MyPicture from '../components/MyPicture.astro';
---
<MyPicture/>

MyPicture.astro

---
import { Picture } from '@astrojs/image/components';
import florence from "../assets/test.png";
---
<Picture
  src={florence}
  widths={[200, 400, 800]}
  sizes="(max-width: 800px) 100vw, 800px"
  alt="Florence Smith Project Manager Picture"
/>

github repo : https://github.com/MicroWebStacks/astro-examples#16_images

Stackbltiz : https://stackblitz.com/github/MicroWebStacks/astro-examples/tree/main/16_images

the first link /picture is working

Getting error "'aspectRatio' must be provided for remote images" when using a local image

1 Answers1