使用 ReactDOMServer.renderToString 将 gatsby-image 注入从 Markdown 创建的 html

Question

Github 上的最小可重现示例

---

我正在尝试将一些图像注入我从 Markdown 创建的页面中。我正在尝试使用 ReactDomServer.renderToString()

const componentCreatedFromMarkdown = ({data}) => {
...    
    useEffect(() => {
        const injectDivs = Array.from(document.getElementsByClassName('injectDivs'))
        injectDivs.forEach((aDiv) => {
            aDiv.innerHTML = ReactDOMServer.renderToString(<Img fluid={data.allFile.edges[0].node.childImageSharp.fluid} />)
        }
    })
...
}

img 显示为一个黑框，如果我右键单击该图像，我可以在新选项卡中打开它，该选项卡会显示应有的图像。

---

Answer 1

我如何理解这个问题

• 图像 html 已正确插入到页面中

• gatsby-image加载最低质量的图像并应用一些内联样式。所有这些信息都存在于 html 中）这样做是为了在图像上启用模糊效果，以获得更好的用户体验。

• 永远不会应用加载更高分辨率图像并删除内联样式的客户端代码。

有用的诊断信息

• 里面的函数useEffect不会在服务器端运行，而是在组件安装后在客户端运行。可以通过console.log在效果中添加一条语句并查看它是否记录在浏览器的控制台上来验证这一点。

问题根源

• ReactDOMServer.renderToString()仅构建组件所需的 HTML，然后要求该组件进行水合。

直接修复

• 您可以使用ReactDOM.render将图像放在页面上，因为该效果将在客户端执行。我这里有一份 PR 显示这一点。

推荐方法

• 您可以将图像导入 mdx 组件中并直接在那里渲染。你的 gatsby 配置已经可以支持这个 在 中content/blog/hello-world/index.mdx，你可以injectImage用这个替换 div ![A salty egg, yummm](./salty_egg.jpg)（其中的文本[]是替代文本）
• 该文档可能会有所帮助
  • https://www.gatsbyjs.org/docs/working-with-images-in-markdown/
  • https://www.gatsbyjs.org/packages/gatsby-remark-images/

希望有帮助！