Image component does not process images from remote source without protocol in path

[linuswilkins]

Astro Info

Astro                    v4.0.3
Node                     v20.10.0
System                   Windows (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/tailwind
                         @astrojs/react

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

No response

Describe the Bug

When I use the component and put in a source that has no "https://" in it eg.: src="//domain.tld" instead of: "https://domain.tld/". Astro does not process the image on build even if the domain "domain.tld" is allowed in the astro.config.mjs.

What's the expected result?

The image should be processed instead of making an -tag with the remote domain in it

Link to Minimal Reproducible Example

https://stackblitz.com/edit/withastro-astro-4km9tg?file=src%2Fpages%2Findex.astro,astro.config.mjs,dist%2Findex.html

Participation

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

[disrae]

Thanks for the example, I'm seeing two cars though, is that expected? I'm using Chrome.

[linuswilkins]

You have to build it and look at the img src of both. One is a local image path and the other one is unchanged.

[Princesseuh]

I would say that this is actually expected behaviour, a protocol-relative link can only work when there's a protocol to go from. In SSG, we cannot know what protocol you're talking about. Sure, we can assume https, but that's kinda not the point of a protocol-relative link.

Nonetheless, we should make this work in SSR, where we do have a protocol to go from

[matthewp]

Agreed here, we don't know the protocol, so just put it in yourself :)

[Princesseuh]

After further investigation and discussion, we're not interested in implementing this anymore. It introduces a fair amount of complexity in the internal code and we try to keep differences, especially subtle invisible ones like this, between SSG and SSR to a minimum when possible.

I'll note that it is possible to work around this in many many ways, since you can access the protocol used in the request in your component, could make a wrapper function / component that does it for you, create an image service that does it for you etc.

Apologies for the inconvenience, if you believe that this should be implemented, I would suggest opening a feature request discussion to see if there's enough community interest: https://github.com/withastro/roadmap/discussions