fix: improve error for inferSize and Image component

[DerTimonius]

Changes

This PR improves the error message a user will see when using inferSize in the Image component when the image is hosted locally instead of remote.

The original error message described in the issue (#11821) did not come from Astro, but from fetch. Therefore I figured that the check if the image is a remote image or not was incorrect.

So I added the check for isRemotePath which now triggers the correct error.

Testing

I tested this locally by changing an <img> in the examples/portfolio about.astro page to the <Image> and added inferSize. After the change, the error was the expected error.

Docs

No change to the docs needed

closes #11821

[changeset-bot]

🦋 Changeset detected

Latest commit: fe23ea2

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Princesseuh]

Hmm, I'm not sure about this. This function is used for other things than just checking for http paths. I assume that adding this check makes it so it report that width and height are needed? I think it'd perhaps be a better option to add an error for this specific case.

[DerTimonius]

@Princesseuh no, the check is for showing the user the correct error when inferSize is being used on a local image. the original error shown in the issue did not come from Astro, but was bubbled up by fetch as it's not provided a valid URL.

if I understand the code correctly, the check that triggers the fetch call is this:

so if you think that the check should not be in the isRemoteImage function, I would move it to this if block instead

[Princesseuh]

Yes, I understand the goal. However the isRemoteImage function is used in other parts of the code than just this specific check. What your change does is invisibly ignore inferSize when the image is not an actual URL, but I think it'd produce a better experience if we instead had an error that would tell the user explicitly that inferSize cannot be used with images inpublic

[DerTimonius]

I have checked if the desired error (which I guess is the one in the screenshot) is displayed with this change by adapting one of the examples (a good place would be the about page in the portfolio example)

this is the code that triggered this error: