withastro / astro

The web framework for content-driven websites. ⭐️ Star to support our work!
https://astro.build
Other
46.65k stars 2.48k forks source link

getImage and Image return Failed to parse URL from when inferSize is set to true #11821

Closed xirf closed 3 weeks ago

xirf commented 2 months ago

Astro Info

BUN:

Astro                    v4.14.0
Node                     v22.6.0
System                   Linux (x64)
Package Manager          bun
Output                   hybrid
Adapter                  @astrojs/vercel/serverless
Integrations             astro-expressive-code
                         @astrojs/mdx
                         @astrojs/sitemap
                         unocss
which: no xclip in (....)

Nodejs:

Astro                    v4.14.0
Node                     v22.6.0
System                   Linux (x64)
Package Manager          npm
Output                   hybrid
Adapter                  @astrojs/vercel/serverless
Integrations             astro-expressive-code
                         @astrojs/mdx
                         @astrojs/sitemap
                         unocss

which: no xclip in (....)

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

getImage and Image return Failed to parse URL from ... when inferSize is set to true

{
  "input": "/images/bar.jpg",
  "code": "ERR_INVALID_URL"
}
// This error
<Image src="/images/bar.jpg" alt={p.data.title} width={800} inferSize={true} />

// but this is work
<img src="/images/bar.jpg" />

// this also work
<Image src="/images/bar.jpg" alt={p.data.title} width={800} height={100} />

this happen when both when image is loaded from public/ or from src/.

An typeError also happend when pass the image from collection to <Image src={post.data.cover}

import { defineCollection, z } from "astro:content";

const blogCollection = defineCollection({
  schema: ({ image }) => z.object({
    title: z.string(),
    cover: image().refine((img) => img.width >= 1080, {
      message: "Cover image must be at least 1080 pixels wide!",
    }),
    coverAlt: z.string(),
  }),
});

export const collections = {
  blog: blogCollection,
};

What's the expected result?

Image is loaded without an error

Link to Minimal Reproducible Example

https://stackblitz.com/edit/withastro-astro-cxn7kx

Participation

Princesseuh commented 2 months ago

inferSize is only valid for images from http remote hosts. It's intended that it does not work for images inside public and src.

Nonetheless, we used to have a better error message here telling you this I'm pretty sure, so still something to fix

DerTimonius commented 2 months ago

I opened a PR that would improve the error message: #11823