[gatsby-source-wordpress] parsed content images are not being replaced properly

Description

Some very funky stuff is happening with the image URLs gatsby replaces, it seems only some of them are getting picked up. Attached are some screenshots & the generated markup

<img loading="lazy" width="1024" height="512" src="https://wp.streetdreams.app/wp-content/uploads/2020/04/SD_Journal_YamsDay_004-1024x512.jpg" alt="" class="wp-image-198" srcset="/wp-content/uploads/2020/04/SD_Journal_YamsDay_004-1024x512.jpg 1024w, /wp-content/uploads/2020/04/SD_Journal_YamsDay_004-300x150.jpg 300w, /wp-content/uploads/2020/04/SD_Journal_YamsDay_004-768x384.jpg 768w, /wp-content/uploads/2020/04/SD_Journal_YamsDay_004-1600x800.jpg 1600w, /wp-content/uploads/2020/04/SD_Journal_YamsDay_004-1536x768.jpg 1536w, /wp-content/uploads/2020/04/SD_Journal_YamsDay_004.jpg 2000w" sizes="(max-width: 1024px) 100vw, 1024px">

As you can see in the code above the urls are not consistent and the image is not being replaced with a gatsby-image instance and as you can see from the screenshot, the image above this broken one works fine.

Steps to reproduce

I have provided @TylerBarnes with the URL to the graphql API & staging site where this is happening

Expected result

The images should be replaced with gatsby-image & a static/ url

Actual result

Doesn’t replace all images

Environment

System: OS: macOS 11.2 CPU: (8) x64 Intel® Core™ i5-8259U CPU @ 2.30GHz Shell: 5.8 - /bin/zsh Binaries: Node: 12.18.4 - /usr/local/bin/node Yarn: 1.22.5 - /usr/local/bin/yarn npm: 6.14.6 - /usr/local/bin/npm Languages: Python: 2.7.16 - /usr/bin/python Browsers: Chrome: 88.0.4324.182 Safari: 14.0.3 npmPackages: gatsby: ^2.32.3 => 2.32.3 gatsby-image: ^2.11.0 => 2.11.0 gatsby-plugin-google-analytics: ^2.11.0 => 2.11.0 gatsby-plugin-manifest: ^2.12.0 => 2.12.0 gatsby-plugin-offline: ^3.10.0 => 3.10.0 gatsby-plugin-postcss: ^3.7.0 => 3.7.0 gatsby-plugin-purgecss: ^5.0.0 => 5.0.0 gatsby-plugin-react-helmet: ^3.10.0 => 3.10.0 gatsby-plugin-robots-txt: ^1.5.5 => 1.5.5 gatsby-plugin-sass: ^3.2.0 => 3.2.0 gatsby-plugin-sharp: ^2.14.1 => 2.14.1 gatsby-plugin-sitemap: ^2.12.0 => 2.12.0 gatsby-source-filesystem: ^2.11.0 => 2.11.0 gatsby-source-shopify: ^3.10.0 => 3.10.0 gatsby-source-wordpress: ^4.0.1 => 4.0.1 gatsby-source-wordpress-experimental: ^7.0.6 => 7.0.6 gatsby-transformer-sharp: ^2.12.0 => 2.12.0 npmGlobalPackages: gatsby-cli: 2.12.111

Notes

• This happens on gatsby cloud also, not just locally
• Only happens since upgrading to v4 from experimental
• I tried useGatsbyImage: false and this still happens, is the flag broken?

Thanks!

[TylerBarnes]

Woo 😄 glad to hear it’s fixed for you!

[CloudBop]

Sorry I should have left a version number. I was at 4.0.3. On my local version the issue is fixed. Rebuilding live version now…

😱 this part of the codebase is the trickiest part since html has so many variations.

I can only begin to imagine! I tried removing the reserved character but once they’ve been flagged I guess that’s that…

It’s still giving me so much joy!

… and I can confirm that the issue is fixed in the latest canary, thanks again @TylerBarnes + @joperron for all the help