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

astro/Image integrations work locally but not on production #5389

Closed
1 task done
donaldjewkes opened this issue Nov 14, 2022 · 3 comments
Closed
1 task done

astro/Image integrations work locally but not on production #5389

donaldjewkes opened this issue Nov 14, 2022 · 3 comments

Comments

@donaldjewkes
Copy link
Contributor

donaldjewkes commented Nov 14, 2022

What version of astro are you using?

1.6.7

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

Netlify

What package manager are you using?

npm

What operating system are you using?

Windows

Describe the Bug

I am having an issue where astro/Image's and tags are working with a local file path but not on production. I have read the documentation and looked at the following similar issues:

#5008
#772

I've tried a lot of different import() path permutations and have attempted to use local files in /src and remote files in /public.

I have been trying to get images to work in this file in my repo
https://github.com/donaldjewkes/site/blob/master/src/pages/photos.astro

The Images appear locally with npm run dev but the images don't render with npm run preview. Looking in /dist it seems that there is a suffix added to resized images with the <Image> integration. For some reason these don't appear in my output directory.

ie.
The original file appears in /dist like so: /assets/van3.742ef038.jpg
But the compressed and resized file /assets/van3.742ef038_Z2rGreV.jpg does not appear.

I'm not sure if this is a bug or an environment issue on my end.

Thanks for any help.

Link to Minimal Reproducible Example

https://github.com/donaldjewkes/site
Deployed version here: https://master--jovial-cranachan-094642.netlify.app/photos/

Participation

  • I am willing to submit a pull request for this issue.
@matthewp
Copy link
Contributor

This should be fixed by #5361

@donaldjewkes
Copy link
Contributor Author

This worked, thanks Matthew!

@railsfactory-robin
Copy link

railsfactory-robin commented Sep 3, 2024

import { getImage } from "astro:assets";
    const processedImage = await getImage({
        src: url,
        width: width,
        height: height,
        format: "webp",
      });

processed image in local - http://localhost:4321/_image?href=https%3A%2F%2Fstaging-sedin-cms.s3.us-east-1.amazonaws.com%2Fb3c4bd888402bd54fc3250dc61fd1e08_b212021441.jpeg&w=480&h=320&f=webp - this is loading

after building - astro build if serve the dist directory there the image is not loading why?. getting 404 error

from strapi im using s3 to store my image,

astro.config

 image: {
   remotePatterns: [{ protocol: "https" }],
   domains: ['staging-test-cms.s3.us-east-1.amazonaws.com'],
 }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants