assets:image generating corrupt image when setting a size on a non webp file | Astro Lounge | Page 1

unreal topaz Mar 25, 2024, 6:15 AM

#

Hey, so I have some png, jpg and webp photo in /src/assets.

If I set a size on the png or jpg files, they come out corrupted (black and white and burned looking), but setting the size works fine on webp files.

Example png image with width and height applied attached.

rapid cypress Mar 25, 2024, 6:23 AM

#

hi ronnie 👋 is this issue happening to a specific set of images your project is using? If you use a cdn for the same images, does that works out?

unreal topaz Mar 25, 2024, 6:27 AM

#

I am using local images, and it is happening to all jpg and png images

rapid cypress Mar 25, 2024, 7:48 AM

#

can you share your project info by sharing results from npm run astro info

unreal topaz Mar 25, 2024, 8:05 AM

#

Astro                    v4.1.1
Node                     v20.10.0
System                   Linux (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             astro-icon

rapid cypress Mar 25, 2024, 11:55 AM

#

I will suggest upgrading it using npx @astrojs/upgrade (in a different branch to save your work) and check if that solves the Issue

dull carbon Mar 25, 2024, 12:20 PM

#

Are you using the default image service?

unreal topaz Mar 26, 2024, 5:21 AM

#

rapid cypress I will suggest upgrading it using `npx @astrojs/upgrade` (in a different branch ...

I will try that, thank you.

unreal topaz Mar 26, 2024, 5:21 AM

#

dull carbon Are you using the default image service?

Yes, I have not changed anything.

#

I am sorry but the upgrade did not fix the issue. I just want to add that if I set the size but set it to exactly the original photo size, the issue does not occur.

#

Should I report this on github?

rapid cypress Mar 26, 2024, 5:42 AM

#

unreal topaz I am sorry but the upgrade did not fix the issue. I just want to add that if I s...

that's strange, are you comfortable sharing your repo here? I could take a peek and see what's odd about it

unreal topaz Mar 26, 2024, 5:42 AM

#

sure

#

https://github.com/ronniedroid/fossifyorg.github.io/tree/fossify-website

GitHub

GitHub - ronniedroid/fossifyorg.github.io at fossify-website

The projects' website. Contribute to ronniedroid/fossifyorg.github.io development by creating an account on GitHub.

#

the fossify-website branch

rapid cypress Mar 26, 2024, 6:02 AM

#

because you have placed all your images inside public directory, no optimization takes place when using <Image />
I could not detect the corruption so far but because you want to use <Image /> your image needs to be placed inside src directory

// Footer.astro
---
import { Image } from "astro:assets";
import logohorizontal from "../assets/Logo-horizontal.png" //the image is stored in src/assets folder
---
<Image
  src={logohorizontal}
  alt="horizontal Fossify logo with title"
  height="75"
  width="200"
/>

#

similar logic but applied in App-card.astro

<Image
    src=`/src/assets/app-screenshots/${app?.data.img}` // the images are stored in src/assets/app-screenshots folder
    alt=`${app?.data.title} screenshot`
    width="220"  //no need to specify unit when using <Image />
    height="400"
  />

unreal topaz Mar 26, 2024, 6:17 AM

#

I do have my photos in assets and not in public

#

that is another thing, I have to /src/assets.. and can't use ../assets/... (I am sorry, this is not true, I had a typing issue)

rapid cypress Mar 26, 2024, 6:20 AM

#

unreal topaz I do have my photos in assets and not in public

i have to assume its a local change houston_sweat_smile and not something pushed in the repo rn?

unreal topaz Mar 26, 2024, 6:20 AM

#

it is pushed and is in the fossify-website branch

rapid cypress Mar 26, 2024, 6:22 AM

#

ohh damn, i have been in main branch for so long facepalm

unreal topaz Mar 26, 2024, 6:22 AM

#

https://tenor.com/view/dog-running-gif-24006184

Tenor

#

😅

rapid cypress Mar 26, 2024, 6:29 AM

#

cant find the corruption in Chrome Browser in footer with this snippet

<Image src={logo} alt="horizontal Fossify logo with title" width={200} height={72} />

unreal topaz Mar 26, 2024, 6:29 AM

#

I am using firefox and can confirm it is working in Chrome

rapid cypress Mar 26, 2024, 6:30 AM

#

omw to install firefox running_metroid

unreal topaz Mar 26, 2024, 6:30 AM

#

so it is a firefox issue

rapid cypress Mar 26, 2024, 6:31 AM

#

clean install 😕

unreal topaz Mar 26, 2024, 6:32 AM

#

😭

rapid cypress Mar 26, 2024, 6:32 AM

#

any settings or extensions acting up?

#

i will try building and previewing
edit: no issue found in preview

unreal topaz Mar 26, 2024, 6:34 AM

#

I did disable all the extensions and gettings the same results.

#

I will try on another PC

#

I am sorry I waisted your time by not testing enough on my side

rapid cypress Mar 26, 2024, 6:35 AM

#

ahh its fine, firefox issues are legitimate concerns for a plethora of users

rapid cypress Mar 26, 2024, 6:36 AM

#

unreal topaz I will try on another PC

removing node_modules and then running npm i is also an option houston_wink

unreal topaz Mar 26, 2024, 6:38 AM

#

That did not work

#

What version of firefox are you running?

#

I am on 124.0.1 on Fedora Linux 39

rapid cypress Mar 26, 2024, 6:40 AM

#

124.0.1 Windows 10

unreal topaz Mar 26, 2024, 6:44 AM

#

Thank you a lot

rapid cypress Mar 26, 2024, 7:13 AM

#

unreal topaz What version of firefox are you running?

i dont have access to a fedora workstation but assuming this is a reproducible issue, Erika will know how to handle this

dull carbon Mar 26, 2024, 7:26 AM

#

I do not know what the issue could be

rapid cypress Mar 26, 2024, 7:27 AM

#

apologies for dat 🙏

unreal topaz Mar 26, 2024, 8:21 AM

#

I am installing a virtual machine to test it there

unreal topaz Mar 26, 2024, 9:32 AM

#

OK, I did some testing

#

Works fine in windows, firefox 123 and 124

#

Doesn't work on fedora linux 39 and latest nightly build firefox 123 and 124

#

tried with npm 20.10 and 20.11

#

Should I open an issue on github?

dull carbon Mar 26, 2024, 9:40 AM

#

I doubt there's anything we'd be able to do

unreal topaz Mar 26, 2024, 9:41 AM

#

Where should I report this then?

#

I will try changing the service

dull carbon Mar 26, 2024, 9:42 AM

#

We don't own the code for processing the images, we just use Sharp

#

So maybe Sharp?

#

But it just seems like a bug in Linux or Firefox

unreal topaz Mar 26, 2024, 9:42 AM

#

yeah, if the other service doesn't have this issue, then maybe Sharp has an issue on linux and firefox

#

yeah, it is pretty weird how specific it is.

#

tried with sqoosh, got same issue

#assets:image generating corrupt image when setting a size on a non webp file