gatsby: [gatsby-source-wordpress] inline images won't resolve the data-src attribute
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
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
- run
gatsby new my-wordpress-gatsby-site https://github.com/gatsbyjs/gatsby-starter-wordpress-blog - run
npm run develop - navigate to
http://localhost:8000/block-image/ - hit reload
- 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
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Reactions: 10
- Comments: 25 (7 by maintainers)
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+3c25c7770aThat’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)
I see the same problem in Safari that @hazuremon described, with
gatsby-source-wordpress@^6.1.2and above, rolling back to version5.14.2helped me solve this problem@TylerBarnes Works on both Chrome and Safari iOS now, as well as MacOS Safari!
@usuallyno @hazuremon can you try
gatsby-source-wordpress@6.7.0-alpha-gatsby-source-wordpress.7+eb08d8a7d9? It should work now 😄Thanks @TylerBarnes on the fix, images are now loading on Safari (MacOS and iOS).
But also confirmed with @usuallyno that it’s not loading on Chrome iOS
iOS 15.1 Chrome 98.0.4758.85
Thanks @benekoehler for confirming Safari issue, I thought i was the only one experiencing it!
Upon checking Safari’s release notes, there are two bugs that maybe in related to the issue:
While waiting for Safari to officially release the fixes, temporarily workaround is turn off
useGatsbyImagein gatsby-config, and disable lazyload.Unfortunately, Safari fixes won’t be backward compatible, wonder if there is any workaround from Gatsby end so that image can be display in current Safari releases.