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

[@astrojs/image]: Fix <Picture /> component with query string #4997

Merged
merged 6 commits into from
Oct 6, 2022

Conversation

panwauu
Copy link
Contributor

@panwauu panwauu commented Oct 6, 2022

Changes

  • When the file extension is created the query parameters are removed
  • By removing the query parameters only after the dot of the file extension, we should not have any problem with question marks in filenames/paths/...

Testing

  • Was not yet able to run tests yet (Happy for any help)
  • image-ssr-build.test.js does include a test with query string the other tests dont. Should we maybe unify all the tests that we always test the same images in all image-ssr-build/dev/ssg and also picture?

Docs

As it is a bugfix, there is no documentation added.

Fixes #4996

@changeset-bot
Copy link

changeset-bot bot commented Oct 6, 2022

🦋 Changeset detected

Latest commit: 859ddf4

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions github-actions bot added the pkg: integration Related to any renderer integration (scope) label Oct 6, 2022
@tony-sull tony-sull self-assigned this Oct 6, 2022
@tony-sull
Copy link
Contributor

Thanks for opening this PR, always great to see a new issue and a bug fix PR opened at the same time!

I'm really curious why this is passing in the <Image /> test but doesn't work for <Picture />, let me dig in a little more and see exactly what's going on.

💯 agree it would be nice to have the tests refactored a little more to align what images are used. A few cases only make sense for <Image /> like the "no transforms" test case, but that shouldn't block a good refactor here

@tony-sull
Copy link
Contributor

Ah ha, getPicture() has to do an extname check that isn't needed for getImage() and it wasn't account for query params

@panwauu You were spot on with the removeQueryParams() check, I just moved it down a level into basename in case another code path ever hits it directly with query params. I didn't refactor the test suite but that's a great idea, in the meantime I added a couple missing test cases to the SSG picture suite

Feel free to reach out if you're interested in working on a test refactor here! Happy to help get you setup to run the tests locally and walk through how they're working today 🙌

@@ -32,7 +32,7 @@ function removeExtname(src: string) {
}

function basename(src: string) {
return src.replace(/^.*[\\\/]/, '');
return removeQueryString(src.replace(/^.*[\\\/]/, ''));
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the bug fix, basename should be stripping off query params

@tony-sull tony-sull merged commit a2b66c7 into withastro:main Oct 6, 2022
@astrobot-houston astrobot-houston mentioned this pull request Oct 6, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pkg: integration Related to any renderer integration (scope)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[@astrojs/image]: Picture not working with query parameter
2 participants