javascript - 使用 ReactDOMServer.renderToString 将 gatsby-image 注入(inject)从 markdown 创建的 html

Question

Minimum Reproducible Example on Github

我正在尝试将一些图像注入(inject)从 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，然后要求组件为 hydrated .

直接修复

您可以使用ReactDOM.render将图像放在页面上，假设效果将在客户端执行。我有一个 PR 显示 here .

推荐的方法

您可以改为在 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/

希望有帮助! 😄