[gatsby-plugin-sharp] Url Encoding Image File Names

[huntercaron]

Uses encodeURI() to fix an issue with image files that contain spaces in the name breaking srcset.

Client was adding images to the CMS backend with spaces in the name, which were breaking the srcset image links. This encodes the file names with the appropriate %20 and such.

(if there is a better place to put it please suggest!)

Before

After

Thanks!

[LekoArts]

Hi, thanks for the PR! 👍
I didn't try it locally yet but one thing to make sure that this won't happen in the future again is to create a test for this, e.g. like this one.

Do you feel comfortable adding a test to make sure that spaces/weird characters are handled correctly? Please let us know if you need help. Thanks!

[huntercaron]

Hi @LekoArts , thanks for the help!

I've never written a test before 😛but it was a cool & useful thing to learn!
It handles quotes 'n such now and I cleaned it up a bit.

Lemme know if it looks good to go!

[huntercaron]

hmm not sure whats going on re: these checks. lint:other is working file locally :/

[pieh]

hmm not sure whats going on re: these checks. lint:other is working file locally :/

We merged PR earlier that had linting errors and those probably came from that - after syncing your branch it was fixed.

For remote files we probably would want to apply encoding in https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-source-filesystem/src/create-remote-file-node.js#L227-L231, but your change also makes sense - there can be local image files with spaces in name so this is definitely needed here too.

---edit
actually my initial thing was wrong - we probably don't want to apply encoding there. But we could also do it here - https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-source-filesystem/src/extend-file-node.js#L17-L19 - but this is out of scope for this PR.

[pieh]

Thanks @huntercaron! 🙏

[gatsbot]

Holy buckets, @huntercaron — we just merged your PR to Gatsby! 💪💜

Gatsby is built by awesome people like you. Let us say “thanks” in two ways:

1. We’d like to send you some Gatsby swag. As a token of our appreciation, you can go to the Gatsby Swag Store and log in with your GitHub account to get a coupon code good for one free piece of swag. (Currently we’ve got a couple t-shirts available, plus some socks that are really razzing our berries right now.)
2. We just invited you to join the Gatsby organization on GitHub. This will add you to our team of maintainers. Accept the invite by visiting https://github.com/orgs/gatsbyjs/invitation. By joining the team, you’ll be able to label issues, review pull requests, and merge approved pull requests.

If there’s anything we can do to help, please don’t hesitate to reach out to us: tweet at @gatsbyjs and we’ll come a-runnin’.

Thanks again!

[huntercaron]

Thanks @pieh!