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

Question

我正在使用 Directus 7 source 从 GatsbyJS 中的 Directus CMS 查询数据，如下所示：

query {
  allDirectusBlog {
    edges {
      node {
        name
        body
      }
    }
  }
}

我的问题是 body 实际上是原始的 HTML，图像标签指向我的 Directus 服务器。这通常很好，但是这些图像非常大，甚至通过 WiFi 加载也需要相当长的时间。有没有办法在构建时用 Gatsby 响应图像替换这些 <img> 标签？

Answer 1

我使用 html-react-parser 和 WordPress 的 post 内容创建了一个函数，用 Gatsby 的所有 img 替换 static 文件夹中提供的图像。

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

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
}

您只需在 components/template 中导入此函数并将其与 ParsePostContentHTML(YourPostContent)

一起使用

希望对你有所帮助！

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

How to replace HTML images with GatsbyJS responsive images?

image

reactjs

gatsby

directus