Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[gatsby-source-wordpress] inline images won't resolve the data-src attribute

See original GitHub issue

Preliminary Checks

Description

After upgrading to gatsby@4 and gatsby-source-wordpress@6 the images from wordpress are not resolved correctly. somehow gatsby image is failing to rehydrate the src attributes from the data-src and data-srcset attribute.

unfortunatly there is no error or warning.

when running the script that is rendered below in the console

const t =
  "undefined" != typeof HTMLImageElement &&
  "loading" in HTMLImageElement.prototype;
if (t) {
  const t = document.querySelectorAll("img[data-main-image]");
  for (let e of t) {
    e.dataset.src &&
      (e.setAttribute("src", e.dataset.src), e.removeAttribute("data-src")),
      e.dataset.srcset &&
        (e.setAttribute("srcset", e.dataset.srcset),
        e.removeAttribute("data-srcset"));
    const t = e.parentNode.querySelectorAll("source[data-srcset]");
    for (let e of t)
      e.setAttribute("srcset", e.dataset.srcset),
        e.removeAttribute("data-srcset");
    e.complete && (e.style.opacity = 1);
  }
}

all the images show up again

it would be really nice if i could get some help here 😃 thanks!

Reproduction Link

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

Steps to Reproduce

  1. run gatsby new my-wordpress-gatsby-site https://github.com/gatsbyjs/gatsby-starter-wordpress-blog
  2. run npm run develop
  3. navigate to http://localhost:8000/block-image/
  4. hit reload
  5. the images have disappeared

Expected Result

<div class="wp-block-image">
  <figure class="aligncenter">
    <div
      data-gatsby-image-wrapper=""
      class="
        gatsby-image-wrapper gatsby-image-wrapper-constrained
        wp-image-906
        inline-gatsby-image-wrapper
      "
      data-reactroot=""
      style="
        position: relative;
        overflow: hidden;
        display: inline-block;
        vertical-align: top;
      "
    >
      <div style="max-width: 1024px; display: block">
        <img
          alt=""
          role="presentation"
          aria-hidden="true"
          src="data:image/svg+xml;charset=utf-8,%3Csvg height='529.6551724137931' width='1024' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3C/svg%3E"
          style="max-width: 100%; display: block; position: static"
        />
      </div>
      <div
        aria-hidden="true"
        data-placeholder-image=""
        style="
          height: 100%;
          left: 0px;
          position: absolute;
          top: 0px;
          width: 100%;
          opacity: 0;
          transition: opacity 500ms linear 0s;
        "
      ></div>
      <picture
        ><source
          type="image/webp"
          sizes="(min-width: 580px) 580px, 100vw"
          srcset="
            /static/539c0066996ddbcc605b6947b35b041e/3f55c/image-alignment-580x300-1.webp 145w,
            /static/539c0066996ddbcc605b6947b35b041e/01ceb/image-alignment-580x300-1.webp 290w,
            /static/539c0066996ddbcc605b6947b35b041e/da5e3/image-alignment-580x300-1.webp 580w
          " />
        <img
          data-gatsby-image-ssr=""
          data-wp-inline-image="1"
          data-main-image=""
          sizes="(min-width: 580px) 580px, 100vw"
          decoding="async"
          loading="lazy"
          alt="Image Alignment 580x300"
          style="
            height: 100%;
            left: 0px;
            position: absolute;
            top: 0px;
            transform: translateZ(0px);
            transition: opacity 250ms linear 0s;
            width: 100%;
            will-change: opacity;
            opacity: 1;
          "
          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
          " /></picture
      ><noscript></noscript>
      <script type="module">
        const t =
          "undefined" != typeof HTMLImageElement &&
          "loading" in HTMLImageElement.prototype;
        if (t) {
          const t = document.querySelectorAll("img[data-main-image]");
          for (let e of t) {
            e.dataset.src &&
              (e.setAttribute("src", e.dataset.src),
              e.removeAttribute("data-src")),
              e.dataset.srcset &&
                (e.setAttribute("srcset", e.dataset.srcset),
                e.removeAttribute("data-srcset"));
            const t = e.parentNode.querySelectorAll("source[data-srcset]");
            for (let e of t)
              e.setAttribute("srcset", e.dataset.srcset),
                e.removeAttribute("data-srcset");
            e.complete && (e.style.opacity = 1);
          }
        }
      </script>
    </div>
    <script type="application/json" data-wp-inline-image-hydration="1">
      {
        "image": {
          "layout": "constrained",
          "backgroundColor": "#181818",
          "images": {
            "fallback": {
              "src": "/static/539c0066996ddbcc605b6947b35b041e/974bc/image-alignment-580x300-1.jpg",
              "srcSet": "/static/539c0066996ddbcc605b6947b35b041e/e72ad/image-alignment-580x300-1.jpg 145w,\n/static/539c0066996ddbcc605b6947b35b041e/b0e80/image-alignment-580x300-1.jpg 290w,\n/static/539c0066996ddbcc605b6947b35b041e/974bc/image-alignment-580x300-1.jpg 580w",
              "sizes": "(min-width: 580px) 580px, 100vw"
            },
            "sources": [
              {
                "srcSet": "/static/539c0066996ddbcc605b6947b35b041e/3f55c/image-alignment-580x300-1.webp 145w,\n/static/539c0066996ddbcc605b6947b35b041e/01ceb/image-alignment-580x300-1.webp 290w,\n/static/539c0066996ddbcc605b6947b35b041e/da5e3/image-alignment-580x300-1.webp 580w",
                "type": "image/webp",
                "sizes": "(min-width: 580px) 580px, 100vw"
              }
            ]
          },
          "width": 1024,
          "height": 529.6551724137931
        },
        "alt": "Image Alignment 580x300",
        "className": "wp-image-906 inline-gatsby-image-wrapper",
        "data-wp-inline-image": "1"
      }
    </script>
  </figure>
</div>

Actual Result

<div class="wp-block-image">
  <figure class="aligncenter">
    <div
      data-gatsby-image-wrapper=""
      class="
        gatsby-image-wrapper gatsby-image-wrapper-constrained
        wp-image-906
        inline-gatsby-image-wrapper
      "
      data-reactroot=""
      style="
        position: relative;
        overflow: hidden;
        display: inline-block;
        vertical-align: top;
      "
    >
      <div style="max-width: 1024px; display: block">
        <img
          alt=""
          role="presentation"
          aria-hidden="true"
          src="data:image/svg+xml;charset=utf-8,%3Csvg height='529.6551724137931' width='1024' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3C/svg%3E"
          style="max-width: 100%; display: block; position: static"
        />
      </div>
      <div
        aria-hidden="true"
        data-placeholder-image=""
        style="
          height: 100%;
          left: 0px;
          position: absolute;
          top: 0px;
          width: 100%;
        "
      ></div>
      <picture
        ><source
          type="image/webp"
          data-srcset="/static/539c0066996ddbcc605b6947b35b041e/3f55c/image-alignment-580x300-1.webp 145w,/static/539c0066996ddbcc605b6947b35b041e/01ceb/image-alignment-580x300-1.webp 290w,/static/539c0066996ddbcc605b6947b35b041e/da5e3/image-alignment-580x300-1.webp 580w"
          sizes="(min-width: 580px) 580px, 100vw" />
        <img
          data-gatsby-image-ssr=""
          data-wp-inline-image="1"
          data-main-image=""
          sizes="(min-width: 580px) 580px, 100vw"
          decoding="async"
          loading="lazy"
          data-src="/static/539c0066996ddbcc605b6947b35b041e/974bc/image-alignment-580x300-1.jpg"
          data-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"
          alt="Image Alignment 580x300"
          style="
            height: 100%;
            left: 0px;
            position: absolute;
            top: 0px;
            transform: translateZ(0px);
            transition: opacity 250ms linear 0s;
            width: 100%;
            will-change: opacity;
            opacity: 0;
          " /></picture
      ><noscript></noscript>
      <script type="module">
        const t =
          "undefined" != typeof HTMLImageElement &&
          "loading" in HTMLImageElement.prototype;
        if (t) {
          const t = document.querySelectorAll("img[data-main-image]");
          for (let e of t) {
            e.dataset.src &&
              (e.setAttribute("src", e.dataset.src),
              e.removeAttribute("data-src")),
              e.dataset.srcset &&
                (e.setAttribute("srcset", e.dataset.srcset),
                e.removeAttribute("data-srcset"));
            const t = e.parentNode.querySelectorAll("source[data-srcset]");
            for (let e of t)
              e.setAttribute("srcset", e.dataset.srcset),
                e.removeAttribute("data-srcset");
            e.complete && (e.style.opacity = 1);
          }
        }
      </script>
    </div>
    <script type="application/json" data-wp-inline-image-hydration="1">
      {
        "image": {
          "layout": "constrained",
          "backgroundColor": "#181818",
          "images": {
            "fallback": {
              "src": "/static/539c0066996ddbcc605b6947b35b041e/974bc/image-alignment-580x300-1.jpg",
              "srcSet": "/static/539c0066996ddbcc605b6947b35b041e/e72ad/image-alignment-580x300-1.jpg 145w,\n/static/539c0066996ddbcc605b6947b35b041e/b0e80/image-alignment-580x300-1.jpg 290w,\n/static/539c0066996ddbcc605b6947b35b041e/974bc/image-alignment-580x300-1.jpg 580w",
              "sizes": "(min-width: 580px) 580px, 100vw"
            },
            "sources": [
              {
                "srcSet": "/static/539c0066996ddbcc605b6947b35b041e/3f55c/image-alignment-580x300-1.webp 145w,\n/static/539c0066996ddbcc605b6947b35b041e/01ceb/image-alignment-580x300-1.webp 290w,\n/static/539c0066996ddbcc605b6947b35b041e/da5e3/image-alignment-580x300-1.webp 580w",
                "type": "image/webp",
                "sizes": "(min-width: 580px) 580px, 100vw"
              }
            ]
          },
          "width": 1024,
          "height": 529.6551724137931
        },
        "alt": "Image Alignment 580x300",
        "className": "wp-image-906 inline-gatsby-image-wrapper",
        "data-wp-inline-image": "1"
      }
    </script>
  </figure>
</div>

Environment

System:
    OS: macOS 11.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.6 - ~/.nvm/versions/node/v14.17.6/bin/node
    npm: 6.14.15 - ~/.nvm/versions/node/v14.17.6/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 95.0.4638.54
    Firefox: 92.0.1
    Safari: 15.0
  npmPackages:
    gatsby: ^4.0.2 => 4.0.2 
    gatsby-plugin-force-trailing-slashes: ^1.0.5 => 1.0.5 
    gatsby-plugin-gatsby-cloud: ^4.0.0 => 4.0.0 
    gatsby-plugin-image: ^2.0.0 => 2.0.0 
    gatsby-plugin-manifest: ^4.0.0 => 4.0.0 
    gatsby-plugin-netlify: ^3.14.0 => 3.14.0 
    gatsby-plugin-react-helmet: ^5.0.0 => 5.0.0 
    gatsby-plugin-react-svg: ^3.1.0 => 3.1.0 
    gatsby-plugin-sharp: ^4.0.0 => 4.0.0 
    gatsby-plugin-sitemap: ^5.0.0 => 5.0.0 
    gatsby-plugin-ts-config: ^2.1.3 => 2.1.3 
    gatsby-plugin-typegen: ^2.2.4 => 2.2.4 
    gatsby-source-filesystem: ^4.0.0 => 4.0.0 
    gatsby-source-wordpress: ^6.0.0 => 6.0.0 
    gatsby-transformer-sharp: ^4.0.0 => 4.0.0 
    gatsby-transformer-yaml: ^4.0.0 => 4.0.0 
  npmGlobalPackages:
    gatsby-cli: 3.14.0

Config Flags

No response

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:10
  • Comments:25 (7 by maintainers)

github_iconTop GitHub Comments

5reactions
TylerBarnescommented, Feb 5, 2022

Hey everyone! I’ve opened a PR with a fix. If you’d like try it out now you can install gatsby-source-wordpress@6.7.0-alpha-gatsby-source-wordpress.6+3c25c7770a

3reactions
TylerBarnescommented, Feb 9, 2022

That’s great news! Thanks @hazuremon ! I’ll merge that PR after the tests pass and it’ll go out in the next Gatsby release (Feb 22nd)

Read more comments on GitHub >

github_iconTop Results From Across the Web

gatsby-source-wordpress content image · Issue #11179 - GitHub
I imagine we would have to render gatsby image to a string during the current process of downloading and replacing the inline images...
Read more >
Using New Gatsby Source WordPress Plugin - CSS-Tricks
Now, we'll replace the starter's data source endpoint URL with our own WordPress site URL: // gatsby-config.js file { resolve: `gatsby-source- ...
Read more >
Inline Images in Gatsby Wordpress source plugin
Gatsby is buggy sometimes when updating images and hrefs. Try to clear cache. gatsby clean. before gatsby develop.
Read more >
draftbox-co/gatsby-wordpress-inline-images
Gatsby WordPress inline images. gatsby-source-wordpress doesn't process images in blocks of text which means your admin site has to serve the images.
Read more >
Gatsby Changelog | 5.3.0
For example, in gatsby-plugin-image you were able to use it with tracedSvg and ... hexpunk: fix(gatsby-remark-graphviz) Fix attribute application PR #36391 ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

gatsby-plugin-image onStartLoad throws warning react dev tools

Next page

Node manifest file paths aren't created correctly