Local image assets not found when using https://

[andrejilderda]

Astro Info

Astro                    v3.0.8
Node                     v18.17.1
System                   macOS (arm64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             none

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

No response

Describe the Bug

Astro image assets return a 404 Not Found when running astro dev with Vite's (dev) server set to https: true.

The reproduction is using @vitejs/plugin-basic-ssl, which is Vite's recommended way of running a dev server with https.

I also tried running the dev server without https and proxy the requests separately, but this results in the same error (if needed I can provide the reproduction for this as well).

What's the expected result?

I expected the image to display properly.

Link to Minimal Reproducible Example

https://github.com/andrejilderda/astro-local-https-assets-issue

Participation

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

[Princesseuh]

This is similar to https://github.com/withastro/astro/issues/6128 and https://github.com/withastro/astro/issues/5699

I'm thinking maybe we should use fs in dev at least. It's annoying because of the code duplication it requires, but might be unfortunately needed.

[ak-en]

Adding my vote to this issue. We need HTTPS on the web frontend due to CORS (server API being called only allows https), and so having this capability would definitely be very useful. Right now, we have to run the API related components with images showing as broken and then test the images separately by disabling https.

[andrejilderda]

@ak-en This is very similar to my case. 👍

[alecdiaz1]

Also having this issue with a similar case to @ak-en. Trying to use Storyblok's visual editor with Astro but Storyblok requires HTTPS.

[unix]

I created a repo (astro-https-image-endpoint) to solve this issue, maybe it will help you guys out.

Now it works fine for me locally and will be automatically disabled in production. (If there are any issues with deployment, you can simply comment out the configuration.)

// astro.config.mjs
import imageEndpoint from 'astro-https-image-endpoint'

export default defineConfig({
  // ... your configs
  image: {
    endpoint: imageEndpoint(import.meta.env.DEV),
  },
})

cc @alecdiaz1 @ak-en @andrejilderda

[Princesseuh]

I created a repo (astro-https-image-endpoint) to solve this issue, maybe it will help you guys out.

Now it works fine for me locally and will be automatically disabled in production. (If there are any issues with deployment, you can simply comment out the configuration.)

// astro.config.mjs
import imageEndpoint from 'astro-https-image-endpoint'

export default defineConfig({
  // ... your configs
  image: {
    endpoint: imageEndpoint(import.meta.env.DEV),
  },
})

cc @alecdiaz1 @ak-en @andrejilderda

Awesome work using 3.1's new feature for setting a custom endpoint! I made it exactly for this purpose. Hoping to build a similar solution in Astro itself very soon

[ak-en]

I created a repo (astro-https-image-endpoint) to solve this issue, maybe it will help you guys out.

Now it works fine for me locally and will be automatically disabled in production. (If there are any issues with deployment, you can simply comment out the configuration.)

// astro.config.mjs
import imageEndpoint from 'astro-https-image-endpoint'

export default defineConfig({
  // ... your configs
  image: {
    endpoint: imageEndpoint(import.meta.env.DEV),
  },
})

cc @alecdiaz1 @ak-en @andrejilderda

Will try it out!

[andrejilderda]

✨ Works like a charm, thanks a lot @unix . Great workaround for now! Feel free to close this issue @Princesseuh .

[ak-en]

@unix, I tried it today but did not work. Here is what I did:

• installed as given at https://github.com/unix/astro-https-image-endpoint#usage
• added the "image" property to the config

My vite config is as below (the key and cert files referred have been generated and work fine to run locally with https):

vite: {
    server: {
      host: "0.0.0.0",
      port: 3000,
      https: {
          key: "./example.com+5-key.pem",
          cert: "./example.com+5.pem",
      },
}

Does the host='0.0.0.0' have any incompatibility with imageEndpoint? Is imageEndpoint only expected to work with the method to configure https shown at https://github.com/unix/astro-https-image-endpoint#how-to-set-https-in-astro?

I am on node 18.17.1 - is a newer version needed?