How to replace HTML images with GatsbyJS responsive images? - reactjs

Question

I am querying data from the Directus CMS in GatsbyJS using the Directus 7 source like so:
query {
allDirectusBlog {
edges {
node {
name
body
}
}
}
}
My problem is that body is actually raw HTML with image tags pointing to my Directus server. Which is normally fine, however these images are extremely large and take a fair amount of time to load even over WiFi. Is there a way to replace these <img> tags with Gatsby responsive images at build time?

Answer 1

I've create a function using html-react-parser with the post content of WordPress to replace all img with of Gatsby and the image provide in the static folder.
If you want a way to do that, this is a part of my code that you'll be able to adapte for your project (this is a WIP function, but work well)
export const ParsePostContentHTML = dataContent => {
let indexKeyImg = 234;
const ParsedHTML = Parse(dataContent, {
replace: function(domNode) {
if(domNode.name === 'img') {
const fluidImg = data.allWordpressWpMedia.edges.filter(media => {
return media.node.source_url === domNode.attribs.src
})
if(fluidImg.length > 0) {
let srcMedia = (fluidImg[0].node.localFile.childImageSharp)
? fluidImg[0].node.localFile.childImageSharp.fluid
: fluidImg[0].node.localFile.publicURL
indexKeyImg++
if(fluidImg[0].node.localFile.childImageSharp) {
return (
<Img
key={indexKeyImg}
fluid={srcMedia}
className={`${domNode.attribs.class} gatsby-rendered-img`}
alt={fluidImg[0].node.alt_text}
/>
)
} else {
return (
<img
key={indexKeyImg}
src={srcMedia}
className={`${domNode.attribs.class} gatsby-rendered-img`}
alt={fluidImg[0].node.alt_text}
/>
)
}
}
}
}
})
return ParsedHTML
}
You just have to import this function in your components/template and using it with ParsePostContentHTML(YourPostContent)
Hope that help you!