search

prismicio / prismic-gatsby

Gatsby plugins for building websites using Prismic
https://prismic.io/docs/technologies/gatsby
Apache License 2.0
313 stars 96 forks source link

Image URL's with "#" in the file name are not properly decoded in v4 #452

Closed chriscarrillo closed 2 years ago

chriscarrillo commented 2 years ago

Versions

Steps to Reproduce

  1. Upload an image with a file name that has a "#" character, in my case, it's Peter_#3.JPG.
  2. Add the image to a content item.
  3. In Gatsby, query the image's URL. Below is what my query looks like: 
    prismicGrowerTemplate {
data {
growers {
  grower_image {
    url
  }
}
}
}
  4. Add the URL to the src of an <img /> element.
  5. Notice the image request returns a 404.
  6. Observe the ending of the src in the <img /> element. Mine says: _Peter_ixlib=gatsbyFP&auto=compress%2Cformat&fit=max&q=50&rect=927%2C0%2C4160%2C4160&w=346&h=346

When testing the same scenario in v3, the src says: _Peter_%233.JPG?auto=compress,format&rect=927,0,4160,4160&w=346&h=346

If I manually add _%233.JPG to the src given in v4 like so, _Peter_%233.JPG?ixlib=gatsbyFP&auto=compress%2Cformat&fit=max&q=50&rect=927%2C0%2C4160%2C4160&w=346&h=346, then it works properly.

Dependencies

"dependencies": {
  "@fortawesome/fontawesome-svg-core": "1.2.20",
  "@fortawesome/free-solid-svg-icons": "5.10.0",
  "@fortawesome/react-fontawesome": "0.1.4",
  "babel-plugin-dynamic-import-node": "^2.3.3",
  "babel-plugin-idx": "2.4.0",
  "babel-plugin-styled-components": "1.10.6",
  "bootstrap": "^4.6.0",
  "case-sensitive-paths-webpack-plugin": "^2.4.0",
  "classnames": "^2.3.1",
  "cookie": "0.4.0",
  "core-js": "^3.18.1",
  "detect-browser": "5.0.0",
  "dotenv": "8.0.0",
  "fp-ts": "^2.11.2",
  "fuse.js": "3.4.5",
  "gatsby": "^3.14.0",
  "gatsby-image": "^3.11.0",
  "gatsby-plugin-google-tagmanager": "^3.13.0",
  "gatsby-plugin-image": "^1.13.0",
  "gatsby-plugin-manifest": "^3.13.0",
  "gatsby-plugin-offline": "^4.13.0",
  "gatsby-plugin-prismic-previews": "^4.1.3",
  "gatsby-plugin-react-helmet": "^4.13.0",
  "gatsby-plugin-react-svg": "^3.0.1",
  "gatsby-plugin-sass": "^4.13.0",
  "gatsby-plugin-sentry": "1.0.1",
  "gatsby-plugin-sharp": "^3.13.0",
  "gatsby-plugin-styled-components": "4.13.0",
  "gatsby-plugin-ts-config": "^2.1.2",
  "gatsby-source-apiserver": "^2.1.8",
  "gatsby-source-filesystem": "^3.13.0",
  "gatsby-source-prismic": "^4.1.6",
  "gatsby-transformer-sharp": "^3.13.0",
  "html2canvas": "^1.0.0-rc.7",
  "idx": "2.5.6",
  "immutable": "^4.0.0-rc.12",
  "io-ts": "^2.2.16",
  "jest": "^27.2.0",
  "jspdf": "^2.3.1",
  "lodash": "^4.17.21",
  "moment": "2.24.0",
  "path": "0.12.7",
  "payment-icons": "^1.2.1",
  "prismic-reactjs": "^1.3.4",
  "prop-types": "15.7.2",
  "qs": "6.9.1",
  "raf": "3.4.1",
  "react": "^16.14.0",
  "react-bootstrap": "^1.6.1",
  "react-bootstrap-table-next": "^4.0.3",
  "react-date-picker": "7.8.1",
  "react-datepicker": "^4.2.1",
  "react-dom": "^16.14.0",
  "react-dropzone": "^11.0.3",
  "react-google-recaptcha": "2.0.1",
  "react-helmet": "5.2.0",
  "react-horizontal-scrolling-menu": "^0.7.8",
  "react-html-parser": "2.0.2",
  "react-https-redirect": "1.1.0",
  "react-icons": "3.6.1",
  "react-idle-timer": "4.2.8",
  "react-immutable-proptypes": "2.2.0",
  "react-instantsearch-dom": "5.7.0",
  "react-loading-overlay": "1.0.1",
  "react-map-gl": "5.2.3",
  "react-modal": "3.8.2",
  "react-number-format": "4.4.1",
  "react-numeric-input": "2.2.3",
  "react-payment-inputs": "1.1.1",
  "react-player": "1.12.0",
  "react-redux": "7.1.0",
  "react-responsive-carousel": "3.1.52",
  "react-scroll-to-component": "1.0.2",
  "react-select": "^3.1.1",
  "react-slick": "0.24.0",
  "react-spinners": "0.5.13",
  "react-to-print": "2.5.0",
  "react-toastify": "5.3.2",
  "react-tooltip": "3.10.0",
  "redux": "4.0.1",
  "redux-mock-store": "1.5.3",
  "redux-saga": "1.0.3",
  "slash": "3.0.0",
  "slick-carousel": "1.8.1",
  "slug": "1.1.0",
  "styled-components": "4.3.2",
  "ts-jest": "^26.4.2",
  "tween": "0.9.0",
  "typescript": "^4.4.3",
  "url-search-params-polyfill": "8.0.0",
  "uuid": "7.0.3",
  "xstate": "4.10.0",
  "yup": "0.27.0"
}

What is expected?

Images with "#" symbols in its file name do not return 404's.

What is actually happening?

Images with "#" symbols in its file name return 404's. See above for the reproduction steps.

Comments

Unfortunately I can't provide a repository for this issue because this is an internal project. Nevertheless, thank you so much for creating this plugin! Please let me know if you need any further details regarding this issue. I appreciate any help you all can provide.

angeloashmore commented 2 years ago

Hi @chriscarrillo, thank you for reporting this.

The issue comes from @imgix/gatsby, which is used for the url, gatsbyImageData, fixed, and fluid fields. I have submitted a PR to fix this. Once it is merged and published, I will publish a new version of gatsby-source-prismic with the updated @imgix/gatsby version.

Related PR: https://github.com/imgix/gatsby/pull/141

I know this is obvious, but for an immediate workaround, use a file without # in the filename.

chriscarrillo commented 2 years ago

Hi @angeloashmore. Thank you so much!

angeloashmore commented 2 years ago

Hey @chriscarrillo, the PR was merged and I just published new versions of the Prismic plugins.

Could you try the updated versions and let me know if they work? Thanks!