Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
1 task
xirf opened this issue Aug 22, 2024 · 2 comments · Fixed by #11823
Closed
1 task

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

xirf opened this issue Aug 22, 2024 · 2 comments · Fixed by #11823
Labels
- P2: nice to have Not breaking anything but nice to have (priority) feat: errors Related to error handling / messages (scope)

Comments

@xirf
Copy link

xirf commented Aug 22, 2024

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

  • I am willing to submit a pull request for this issue.
@github-actions github-actions bot added the needs triage Issue needs to be triaged label Aug 22, 2024
@Princesseuh
Copy link
Member

Princesseuh commented Aug 22, 2024

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

@Princesseuh Princesseuh added - P2: nice to have Not breaking anything but nice to have (priority) feat: errors Related to error handling / messages (scope) and removed needs triage Issue needs to be triaged labels Aug 22, 2024
@DerTimonius
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
- P2: nice to have Not breaking anything but nice to have (priority) feat: errors Related to error handling / messages (scope)
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants