Reactjs 如何用GatsbyJS响应图像替换HTML图像？

我使用类似的方法从GatsbyJS中的Directus CMS查询数据：

---

我的问题是，

body

实际上是原始HTML，带有指向Directus服务器的图像标记。这通常很好，但是这些图像非常大，即使通过WiFi加载也需要相当长的时间。有没有办法在构建时用盖茨比响应图像替换这些

标记？

我创建了一个函数，使用带有WordPress的post内容的

html react parser

替换盖茨比的所有img和

静态
文件夹中提供的图像

如果您想要一种方法来实现这一点，这是我的代码的一部分，您可以根据您的项目进行调整（这是一个WIP函数，但运行良好）

export const ParsePostContentHTML=dataContent=>{
设indexKeyImg=234；
const ParsedHTML=Parse（数据内容{
替换：函数（domNode）{
if（domNode.name=='img'）{
const fluidImg=data.allWordpressWpMedia.edges.filter（媒体=>{
返回media.node.source\u url==domNode.attribs.src
})
如果（最大长度>0）{
让srcMedia=（fluidImg[0].node.localFile.childImageSharp）
？FluidMg[0]。node.localFile.childImageSharp.fluid
：fluidImg[0].node.localFile.publicURL
索引键img++
if（fluidImg[0].node.localFile.childImageSharp）{
返回(
)
}否则{
返回(
)
}
}
}
}
})
返回DHTML
}

您只需在组件/模板中导入此函数，并将其与
ParsePostContentHTML（YourPostContent）

希望对你有帮助
 谢谢你的回复！我可能会考虑为这类事情写一个盖茨比变形金刚，你介意我使用一些代码吗？（对不起，因为我的名声，我不能升级。我还没做多少）@somebody0没问题，如果你想的话，你可以全部使用！
query {
  allDirectusBlog {
    edges {
      node {
        name
        body
      }
    }
  }
}

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
}