🐛 BUG: @astrojs/image should use root relative paths in the _image?href= endpoint

[tony-sull]

What version of astro are you using?

1.0.0-beta.73

Are you using an SSR adapter? If so, which one?

none

What package manager are you using?

pnpm

What operating system are you using?

mac

Describe the Bug

In astro dev, the image integration uses an image's full path in the _image?href= endpoint. This only happens in dev, but really should use a root relative path if possible

Link to Minimal Reproducible Example

https://astro.new

Participation

• I am willing to submit a pull request for this issue.

[ivoba]

I noticed probably the same issue when trying the blog example with Hero image and the Picture component.

heroImage:
  src: "../img/blog/blindschleichen-sichtung.jpg"
  alt: "Blindschleiche und Ameisen"

---

import { Picture } from '@astrojs/image/components';
...
<Picture src={import(heroImage.src)} widths={[200, 400, 800]} sizes="(max-width: 800px) 100vw, 800px" formats={['avif', 'jpeg', 'png', 'webp']} alt={heroImage.alt} />

This works with npm run dev but fails with npm run build

error Cannot find module '/home/runner/work/biotop-sielsdorf/biotop-sielsdorf/img/blog/blindschleichen-sichtung.jpg' imported from /home/runner/work/biotop-sielsdorf/biotop-sielsdorf/dist/entry.mjs

[tony-sull]

Looks like I lost this bug in the mix, @astrojs/image started using relative paths in the refactor around v0.8.0 🎉