-
Notifications
You must be signed in to change notification settings - Fork 1.3k
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
[🐞] image optimizer with imagetools in cloudflare addressed wrong srcset #6620
Comments
I'm facing the same issue on Netlify - so this doesn't seem to be Cloudflare specific. The issue does not appear in local dev. This happened after I upgraded from qwik v1.3.x to 1.6.0 Client-side navigation seems to reset image URLs to have the correct path. Here's an example image tag with the wrong path (note "assets" in the path) <img decoding="async" loading="lazy" alt="an example image." srcset="/assets/example-m-Dmbnq0dN.webp 200w, /assets/example-m-N97A-rpt.webp 400w, /assets/example-m-CkmAcJRP.webp 600w, /assets/example-m-CJIwsBYE.webp 800w, /assets/example-m-Dfse9hf3.webp 1200w" width="1200" height="1200" class="hidden lg:block object-cover w-full h-full" q:key="X5_3"> And here is the same tag when I navigate away then come back to the same page (it appears correctly - with the correct path "build" and the names of the image files obfuscated): <img srcset="/build/q-5m56tHTT.webp 200w, /build/q-DfewPq6b.webp 400w, /build/q-pJgHCUT9.webp 600w, /build/q-iSMLAWBN.webp 800w, /build/q-37HvYX96.webp 1200w" width="1200" height="1200" decoding="async" loading="lazy" alt="an example image." class="hidden lg:block object-cover w-full h-full" q:key="X5_3"> |
Thanks for the report @yasserlens ! Can you please provide a link to the repro github repo? Thanks! |
I'm looking at this issue but I can't reproduce it locally. |
Since I can only see this in prod I don't have a ready repo - but I'll try to isolate the issue in sample code and publish it somewhere. Note that I also tried this on Vercel using the Vercel adapter - same issue.
Only in production. Local dev doesn't show it. Local prod via |
I created a public repo for you to see this - see demo below: And the code is below: Notes:
|
I see thanks, I reproduced it locally and I found the commit that generated the issue. I'm working to fix this. |
Can you try these versions to confirm the fix pls?
|
Thanks @gioboa - this worked when tested on a Vercel deployment. A few notes:
|
I didn't touch that part
That's so strange Thanks for your feedback, I will merge the PR to solve this issue 👍 |
Thank you for the quick resolution @gioboa! |
instead I have the feeling that it took me a long time to find the cause 🤣 |
@gioboa any idea when this will hit a stable release? was hoping it would be out today with the 1.7.0 release :) |
We need to merge this PR #6643 first. There are few concerns on the resolution. |
It was me reported FIRST. Me! Me! 😄 |
Thanks @alimrb 😉🥇 |
Is there a recommended workaround until this is resolved? |
is that okay if I use this for temporary solution? need to deploy on production |
Looking at the source - this looks OK as a temp fix but may cause issues that are hard to debug later (for Qwik's core team). |
hi @yasserlens do you know how to use this?
I'm trying to use it using |
Appears to be happening only in production. Works without issues on local dev and build preview. |
Yeah - that's already established with proof - see my comments above on how this can be reproduced. |
We are looking into it, see the progress here In the meantime you can use this updated release
|
hi @gioboa ,
already clean all the node_modules and update the lockfile by doing |
Thanks for the quick action on this! The workaround works well. Just a heads up: implementing this fix can cause dependency issues with some integrations—@qwikest/icons in my case. To resolve, need to use the
|
can't apply this changes on cloudflare |
@DeVoresyah correct, wasn't referencing Cloudflare, just a general heads up. I am not that well versed on Cloudflare but I think the equivalent for modifying build commands is through the |
@DeVoresyah |
thanks, you saved my life. I'm chaing the bun version to be same like in my local |
Which component is affected?
Qwik Runtime
Describe the bug
In cloudflare, I see in the build logs that build directory webp images are being built correct in "build/q-[hash].webp", but in browser, developer tools says srcset ist set to "/assets/[filename]-[hash].webp".
dev and preview have no problem with it.
example here (Demo app):
https://qwik-app-9et.pages.dev/
Reproduction
https://qwik-app-9et.pages.dev/
Steps to reproduce
cloudflare build
System Info
Additional Information
No response
The text was updated successfully, but these errors were encountered: