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的帖子内容创建了一个函数，以用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)

一起使用

希望对您有帮助！

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

1 个答案: