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

Question

Minimum Reproducible Example on 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

我之前在我的第一个 Gatsby 项目中遇到过这个问题。 与此chat 类似的问题和错误图像问题here。

如果你替换GatsbyImageSharpFixed_withWebp_tracedSVG就像他们在上面的频谱聊天中所说的那样，或者这是我现在的代码，例如，基本上与WebP新的图像格式有关。

export const query = graphql`
  query {
    allImageSharp {
      edges {
        node {
          fluid(maxWidth: 110) {
            aspectRatio
            originalName
            sizes
            src
            srcSet
            srcWebp
            tracedSVG
          }
        }
      }
    }
  }
`;

希望对您有所帮助。

Answer 2

我认为问题可能出在 useEffect 中

const componentCreatedFromMarkdown = ({data}) => {

...    
    useEffect(() => {
        const injectDivs = Array.from(document.getElementsByClassName('injectDivs'))
        injectDivs.forEach((aDiv) => {
            aDiv.innerHTML = ReactDOMServer.renderToString(<MyComponent args={myArgs} />)
        }
    },[])
...
}

我认为你应该尝试添加useEffect(()=>{},[])，第二个参数只在组件挂载时刷新图像，否则每次都会刷新图像。

Answer 3

我是如何理解这个问题的

• 图片html正确插入页面

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

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

有用的诊断信息

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

问题的根源

• ReactDOMServer.renderToString() 仅构建组件所需的 HTML，然后要求组件为 hydrated。

直接修复

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

推荐方法

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

希望对您有所帮助！ ?