Url encoded characters in public ID not handled well in AdvancedImage component #249
Description
Bug report for Cloudinary React SDK
Before proceeding, please update to latest version and test if the issue persists
Describe the bug in a sentence or two.
Given a public ID like x/aeshna-subarctica-male-go%CC%88ran-liljeberg-cc-by_s2kxzr.jpg the URL gets transformed by encoding the % one time too many into x/aeshna-subarctica-male-go%25CC%2588ran-liljeberg-cc-by_s2kxzr.jpg
Describe the desired/expected behavior.
Using the public ID with url-gen works fine and I retrieve an image object with correct public Id. Using this Image in the AdvancedImage component together with the responsive plugin distorts the resulting URL into something that is not parseable by Cloudinary.
Link to reproduction of the issue on codepen/jsfiddle/etc.
Issue Type (Can be multiple)
[ ] Build - Can’t install or import the SDK
[ ] Babel - Babel errors or cross browser issues
[ ] UI/Performance - Display or performance issues
[X ] Behaviour - Functions aren’t working as expected (Such as generate URL)
[ ] Documentation - Inconsistency between the docs and behaviour
[ ] Incorrect Types - For typescript users who are having problems with our d.ts files
[ ] Other (Specify)
Browsers (if issue relates to UI, else ignore)
[X] Chrome
[ ] Firefox
[ ] Safari
[ ] Other (Specify)
[ ] All
Versions and Libraries (fill in the version numbers)
cloudinary/core: N/A
@cloudinary/react - 1.4.1
@cloudinary/url-gen: 1.8.0
React - 17.0.1
Gatsby: 4.14.1
Config Files (Please paste the following files if possible)
{
....
"dependencies": {
"@cloudinary/react": "^1.4.1",
"@cloudinary/url-gen": "^1.8.0",
"@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1",
"@juggle/resize-observer": "^3.3.1",
"@types/react-helmet": "^6.1.5",
"cloudinary-react": "^1.7.2",
"dotenv": "^16.0.1",
"gatsby": "^4.14.1",
"gatsby-plugin-gatsby-cloud": "^4.14.0",
"gatsby-plugin-google-analytics": "^4.14.0",
"gatsby-plugin-image": "^2.14.1",
"gatsby-plugin-manifest": "^4.14.0",
"gatsby-plugin-offline": "^5.14.1",
"gatsby-plugin-react-helmet": "^5.14.0",
"gatsby-plugin-sharp": "^4.14.1",
"gatsby-plugin-typography": "^4.14.0",
"gatsby-source-filesystem": "^4.14.0",
"gatsby-source-graphql": "^4.14.0",
"gatsby-transformer-sharp": "^4.14.0",
"leaflet": "^1.8.0",
"prop-types": "^15.8.1",
"react": "^17.0.1",
"react-autosuggest": "^10.1.0",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
"react-image-lightbox": "^5.1.4",
"react-leaflet": "^3.2.5",
"react-showdown": "^2.3.1",
"react-spring": "^9.4.5",
"react-typography": "^0.16.20",
"react-use-measure": "^2.1.1",
"typography": "^0.16.21",
"typography-theme-lincoln": "^0.16.19"
},
"devDependencies": {
"prettier": "^2.6.2"
},
"keywords": [
"gatsby"
],
"license": "0BSD",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write "**/*.{js,jsx,ts,tsx,json,md,css}"",
"start": "gatsby develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo "Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
},
...
}
Repository
If possible, please provide a link to a reproducible repository that showcases the problem