getImage() does not work for remote images

DCLangX commented 1 year ago

What version of `astro` are you using?

2.5.6

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

none

What package manager are you using?

pnpm

What operating system are you using?

windows

What browser are you using?

chrome

Describe the Bug

I try to generate an optimized remote image by use getImage(),but it doesn't work,the image is still the original address😥

---
import { getImage, Image } from 'astro:assets'
const optimizedLogoImg = await getImage({
  src: 'https://avatars.githubusercontent.com/u/19513657?v=4',
  width: 500,
  height: 500,
  quality: 'low',
  format: 'jpg'
})
---

    <img src={optimizedLogoImg.src} alt="test" />
    <Image
      src={optimizedLogoImg.src}
      width="500"
      height="500"
      format="jpg"
      quality="low"
      alt="A description of my image."
    />
    <Image
      src="https://avatars.githubusercontent.com/u/19513657?v=4"
      width="500"
      height="500"
      format="jpg"
      quality="low"
      alt="A description of my image."
    />

Link to Minimal Reproducible Example

https://github.com/DCLangX/test-astro

Participation

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

Princesseuh commented 1 year ago

This is intended, remote images do not get optimized or resized. The docs is a bit fuzzy, but it's mentioned in this section: https://docs.astro.build/en/guides/assets/#update-your-markdown-mdx-and-markdoc-files

adamdottv commented 1 year ago

@Princesseuh this wasn't immediately apparent to me in the docs, either; I dug through the code to find a comment that made it clear remote images aren't optimized by either local image service.

Am I missing some obvious reason why I should not submit a PR for adding remote image support?

Princesseuh commented 1 year ago

@Princesseuh this wasn't immediately apparent to me in the docs, either; I dug through the code to find a comment that made it clear remote images aren't optimized by either local image service.

Am I missing some obvious reason why I should not submit a PR for adding remote image support?

We purposely left it out from a first version of astro:assets for multiple reasons:

Wanted to keep the scope small for now (remote images support kinda has to go with other features such as remote patterns to avoid security issues)
Wanted to push users towards self-hosting their images as much as possible, for performance reasons
Wanted users to rely more on their chosen platforms of hosting for optimizing, several CMSes supports optimizing images directly nowadays.

If you're interested in pushing forward a proposal for this, feel free to create a thread over at https://github.com/withastro/roadmap

AndreCox commented 1 year ago

Hello, I also ran into this problem as the documentation is very lacking in this area. Is there any way of getting remote image optimization to work. Or any other options in the meantime?

Princesseuh commented 1 year ago

Hello, I also ran into this problem as the documentation is very lacking in this area. Is there any way of getting remote image optimization to work. Or any other options in the meantime?

The latest version supports remote images. Just make sure the domains are allowed in your config https://docs.astro.build/en/guides/assets/#allowed-domains-and-remote-patterns-for-remote-images

AndreCox commented 1 year ago

Hello, I also ran into this problem as the documentation is very lacking in this area. Is there any way of getting remote image optimization to work. Or any other options in the meantime?

The latest version supports remote images. Just make sure the domains are allowed in your config https://docs.astro.build/en/guides/assets/#allowed-domains-and-remote-patterns-for-remote-images

Thanks for the response, does this optimize the remote images because in my testing no optimization was done? I tried local images and those worked perfectly.

Princesseuh commented 1 year ago

Hello, I also ran into this problem as the documentation is very lacking in this area. Is there any way of getting remote image optimization to work. Or any other options in the meantime?

The latest version supports remote images. Just make sure the domains are allowed in your config https://docs.astro.build/en/guides/assets/#allowed-domains-and-remote-patterns-for-remote-images

Thanks for the response, does this optimize the remote images because in my testing no optimization was done? I tried local images and those worked perfectly.

Yes, remote images do get optimized with this.

AndreCox commented 1 year ago

Hello, I also ran into this problem as the documentation is very lacking in this area. Is there any way of getting remote image optimization to work. Or any other options in the meantime?

The latest version supports remote images. Just make sure the domains are allowed in your config https://docs.astro.build/en/guides/assets/#allowed-domains-and-remote-patterns-for-remote-images

Thanks for the response, does this optimize the remote images because in my testing no optimization was done? I tried local images and those worked perfectly.

Yes, remote images do get optimized with this.

Thanks for confirming this. I am unable to get remote images to work. Right now I have a Strapi CMS running on port 1337 and my config file looks like this

export default defineConfig({
  integrations: [
    react(),
    tailwind(),
    partytown({
      config: {
        forward: ["dataLayer.push"],
      },
    }),
  ],
  experimental: {
    assets: true,
  },
  compressHTML: true,
  cacheDir: ".cache",
  image: {
    service: {
      entrypoint: "astro/assets/services/squoosh",
    },
    remotePatterns: [
      {
        hostname: strapiUrl + "/uploads",
        protocol: "http",
      },
    ],
  },
});

I also tried to optimize images from other websites and this also did not work. Any idea on how to fix this, or a working example config for remote images so I can find out where my code is breaking.

AndreCox commented 1 year ago

Actually just updated to the latest version that was released a couple hours ago and it started working

withastro / astro