javascript - 使用 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，然后需要组件hydrad。

直接修复

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

推荐的方法

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

希望有帮助！

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

在我的第一个 Gatsby 项目中，我曾经遇到过这个问题。类似于此聊天的问题和此处的错误图像问题。

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

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

希望这有帮助。