gatsby-source-wordpress: image rewriting no longer works with the introduction of IMAGE_CDN (i.e. gatsby >= 4.10.x) #35626

rburgst · 2022-05-10T17:26:11Z

Preliminary Checks

This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

It appears that with the introduction of IMAGE_CDN the whole html image rewriting to gatsby image no longer works.

It appears that it is no longer possible to use gatsbyImage without IMAGE_CDN, the HTML content that gets rewritten appears to require gatsby functions (and probably the IMAGE_CDN) to be present.

Reproduction Link

https://github.com/gatsbyjs/gatsby-starter-wordpress-blog

Steps to Reproduce

npx gatsby new gatsby-starter-wordpress-blog https://github.com/gatsbyjs/gatsby-starter-wordpress-blog
cd gatsby-starter-wordpress-blog
yarn build
yarn serve

now open the URL localhost:9000/block-image/
and inspect the HTML

Expected Result

Images should be rewritten to static gatsby images

e.g. (this is the output with gatsby 4.9.1)

<img data-gatsby-image-ssr="" data-wp-inline-image="1" data-main-image="" 
  style="height: 100%; left: 0px; position: absolute; top: 0px; transform: translateZ(0px); transition: opacity 250ms linear 0s; width: 100%; will-change: opacity; opacity: 1;" sizes="(min-width: 580px) 580px, 100vw" 
  decoding="async" loading="lazy" alt="Image Alignment 580x300" 
  src="/static/539c0066996ddbcc605b6947b35b041e/974bc/image-alignment-580x300-1.jpg" 
  srcset="/static/539c0066996ddbcc605b6947b35b041e/e72ad/image-alignment-580x300-1.jpg 145w,/static/539c0066996ddbcc605b6947b35b041e/b0e80/image-alignment-580x300-1.jpg 290w,/static/539c0066996ddbcc605b6947b35b041e/974bc/image-alignment-580x300-1.jpg 580w">

Actual Result

All of the images are being rewritten to something like

<img data-wp-inline-image="1" 
  data-main-image="" 
  style="height: 100%; left: 0px; position: absolute; top: 0px; transform: translateZ(0px); transition: opacity 250ms linear 0s; width: 100%; will-change: opacity; opacity: 0;" 
  sizes="(min-width: 580px) 580px, 100vw" 
  decoding="async" loading="lazy" 
  data-src="/_gatsby/image/406ca6ba97b4c609708eb571aa991c5e/7d9d8c0a03f4a29416110437c078ce56/image-alignment-580x300-1.jpg?u=https%3A%2F%2Fwpgatsbydemo.wpengine.com%2Fwp-content%2Fuploads%2F2013%2F03%2Fimage-alignment-580x300-1.jpg&amp;a=w%3D145%26h%3D75%26fm%3Djpg%26q%3D90" 
  data-srcset="/_gatsby/image/406ca6ba97b4c609708eb571aa991c5e/7d9d8c0a03f4a29416110437c078ce56/image-alignment-580x300-1.jpg?u=https%3A%2F%2Fwpgatsbydemo.wpengine.com%2Fwp-content%2Fuploads%2F2013%2F03%2Fimage-alignment-580x300-1.jpg&amp;a=w%3D145%26h%3D75%26fm%3Djpg%26q%3D90 145w,/_gatsby/image/406ca6ba97b4c609708eb571aa991c5e/2495b497796c4fc6b582c85dbe643ebe/image-alignment-580x300-1.jpg?u=https%3A%2F%2Fwpgatsbydemo.wpengine.com%2Fwp-content%2Fuploads%2F2013%2F03%2Fimage-alignment-580x300-1.jpg&amp;a=w%3D290%26h%3D150%26fm%3Djpg%26q%3D90 290w,/_gatsby/image/406ca6ba97b4c609708eb571aa991c5e/d0968e16e1dde1ded1f1e3f63ae649be/image-alignment-580x300-1.jpg?u=https%3A%2F%2Fwpgatsbydemo.wpengine.com%2Fwp-content%2Fuploads%2F2013%2F03%2Fimage-alignment-580x300-1.jpg&amp;a=w%3D580%26h%3D300%26fm%3Djpg%26q%3D90 580w" 
  alt="Image Alignment 580x300"
>

Specifically look at the image srcset url:
http://localhost:9000/_gatsby/image/406ca6ba97b4c609708eb571aa991c5e/7d9d8c0a03f4a29416110437c078ce56/image-alignment-580x300-1.jpg

This URL does not resolve. Actually I am not even sure whether this would be taken into account anyway as the <img tag has no normal src or srcset tag.

Environment

System:
    OS: macOS 12.3.1
    CPU: (10) arm64 Apple M1 Pro
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.1 - /var/folders/9h/6y70jr3x7cb4cykkjldnppgc0000gn/T/yarn--1652203561098-0.7754946860868244/node
    Yarn: 1.22.18 - /var/folders/9h/6y70jr3x7cb4cykkjldnppgc0000gn/T/yarn--1652203561098-0.7754946860868244/yarn
    npm: 8.1.2 - ~/.volta/tools/image/node/16.13.1/bin/npm
  Browsers:
    Chrome: 101.0.4951.54
    Firefox: 100.0
    Safari: 15.4
  npmPackages:
    gatsby: ^4.0.0 => 4.14.0 
    gatsby-plugin-image: ^2.0.0 => 2.14.0 
    gatsby-plugin-manifest: ^4.0.0 => 4.14.0 
    gatsby-plugin-offline: ^5.0.0 => 5.14.0 
    gatsby-plugin-react-helmet: ^5.0.0 => 5.14.0 
    gatsby-plugin-sharp: ^4.0.0 => 4.14.0 
    gatsby-source-filesystem: ^4.0.0 => 4.14.0 
    gatsby-source-wordpress: ^6.0.0 => 6.14.0 
    gatsby-transformer-sharp: ^4.0.0 => 4.14.0

Config Flags

No response

The text was updated successfully, but these errors were encountered:

rburgst · 2022-05-10T17:27:17Z

this is what the output page looks like

rburgst · 2022-05-10T17:29:43Z

In the network tab I can see the following 404s:

http://localhost:9000/_gatsby/image/406ca6ba97b4c609708eb571aa991c5e/d0968e16e1dde1ded1f1e3f63ae649be/image-alignment-580x300-1.jpg?u=https%3A%2F%2Fwpgatsbydemo.wpengine.com%2Fwp-content%2Fuploads%2F2013%2F03%2Fimage-alignment-580x300-1.jpg&a=w%3D580%26h%3D300%26fm%3Djpg%26q%3D90

http://localhost:9000/_gatsby/image/2d6b523af24ce0c38c652226b1c5dd28/9e3412450d5a1c35db8e225de8963761/image-alignment-150x150-1.jpg?u=https%3A%2F%2Fwpgatsbydemo.wpengine.com%2Fwp-content%2Fuploads%2F2013%2F03%2Fimage-alignment-150x150-1.jpg&a=w%3D150%26h%3D150%26fm%3Djpg%26q%3D90

http://localhost:9000/_gatsby/image/5ff97029df0290ec44f98ef36a1806a1/b77ce486b121adcdc5abef40b9e331ba/image-alignment-1200x4002-1.jpg?u=https%3A%2F%2Fwpgatsbydemo.wpengine.com%2Fwp-content%2Fuploads%2F2013%2F03%2Fimage-alignment-1200x4002-1.jpg&a=w%3D1024%26h%3D341%26fm%3Djpg%26q%3D90

http://localhost:9000/_gatsby/image/45ba6909c21a2e4a5b7ae94250a880fb/cc7ec2e583f6d13a337b6733f19c4264/image-alignment-300x200-1.jpg?u=https%3A%2F%2Fwpgatsbydemo.wpengine.com%2Fwp-content%2Fuploads%2F2013%2F03%2Fimage-alignment-300x200-1.jpg&a=w%3D300%26h%3D200%26fm%3Djpg%26q%3D90

rburgst · 2022-05-10T17:42:55Z

reran the generated sample with the following versions

    "gatsby": "4.9.1",
    "gatsby-plugin-image": "2.11.1",
    "gatsby-plugin-manifest": "4.9.1",
    "gatsby-plugin-offline": "5.9.1",
    "gatsby-plugin-react-helmet": "5.9.0",
    "gatsby-plugin-sharp": "4.9.1",
    "gatsby-source-filesystem": "4.11.1",
    "gatsby-source-wordpress": "6.9.1",
    "gatsby-transformer-sharp": "4.9.0",

With that all the images look good.

rburgst · 2022-05-10T17:48:11Z

while not directly related, but #35151 shows the commit with which the image rewriting was changed towards the gatsbyImageResolver

veryspry · 2022-05-12T08:41:22Z

Hey @rburgst 👋

I just followed the reproduction steps and the images do seem to be loading correctly for me (no 404's in the network tab). The img tags also look okay to me. As an example, one of them looks like this:

<img src="/_gatsby/file/406ca6ba97b4c609708eb571aa991c5e/image-alignment-580x300-1.jpg?u=https%3A%2F%2Fwpgatsbydemo.wpengine.com%2Fwp-content%2Fuploads%2F2013%2F03%2Fimage-alignment-580x300-1.jpg" alt="Image Alignment 580x300" class="wp-image-906 inline-gatsby-image-wrapper" data-reactroot="">

The images are rendering in the browser for me to:

When using the gatsbyImage field and resolver, it is expected behavior that the image path will be /_gatsby/image. Can you double check that the images that are 404'ing in your browser are indeed missing from /public/_gatsby/image in your gatsby site directory?

Hopefully that will help narrow down where the bug is happening. Thanks!

rburgst · 2022-05-12T11:12:13Z

hmm, very weird. I can now see the images again. I still have a rewriting problem in my production database. Obviously its not so simple as I had thought. I will try to replicate our problem and produce a repro.

rburgst · 2022-05-18T16:49:18Z

I will create a new issue as the title is no longer correct

rburgst added the type: bug An issue or pull request relating to a bug in Gatsby label May 10, 2022

gatsbot bot added the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label May 10, 2022

rburgst changed the title ~~gatsby-source-wordpress: image rewriting completely broken with the introduction of IMAGE_CDN~~ gatsby-source-wordpress: image rewriting no longer works with the introduction of IMAGE_CDN (i.e. gatsby >= 4.10.x) May 10, 2022

LekoArts added topic: source-wordpress Related to Gatsby's integration with WordPress topic: source-plugins Relates to the Gatsby source plugins (e.g. -filesystem) and removed status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer labels May 11, 2022

rburgst mentioned this issue May 11, 2022

Gatsby-source-wordpress not able to fetch image behind basic authenticate WordPress source #35151

Closed

2 tasks

rburgst closed this as completed May 18, 2022

rburgst mentioned this issue May 18, 2022

[gatsby-source-wordpress] url rewriting for files no longer works when updating the wordpress page while dev server runs #35691

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

gatsby-source-wordpress: image rewriting no longer works with the introduction of IMAGE_CDN (i.e. gatsby >= 4.10.x) #35626

gatsby-source-wordpress: image rewriting no longer works with the introduction of IMAGE_CDN (i.e. gatsby >= 4.10.x) #35626

rburgst commented May 10, 2022 •

edited

rburgst commented May 10, 2022

rburgst commented May 10, 2022

rburgst commented May 10, 2022

rburgst commented May 10, 2022

veryspry commented May 12, 2022

rburgst commented May 12, 2022

rburgst commented May 18, 2022

gatsby-source-wordpress: image rewriting no longer works with the introduction of IMAGE_CDN (i.e. gatsby >= 4.10.x) #35626

gatsby-source-wordpress: image rewriting no longer works with the introduction of IMAGE_CDN (i.e. gatsby >= 4.10.x) #35626

Comments

rburgst commented May 10, 2022 • edited

Preliminary Checks

Description

Reproduction Link

Steps to Reproduce

Expected Result

Actual Result

Environment

Config Flags

rburgst commented May 10, 2022

rburgst commented May 10, 2022

rburgst commented May 10, 2022

rburgst commented May 10, 2022

veryspry commented May 12, 2022

rburgst commented May 12, 2022

rburgst commented May 18, 2022

rburgst commented May 10, 2022 •

edited