时间戳

首页 > 解决方案 > 如何用 GatsbyJS 响应式图像替换 HTML 图像？

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

问题描述

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

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

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

标签： reactjsimagegatsbydirectus

解决方案

我已经创建了一个函数，使用html-react-parserWordPress 的帖子内容来替换 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
}

您只需在组件/模板中导入此功能并将其与ParsePostContentHTML(YourPostContent)

希望对您有所帮助！

推荐阅读