reactjs - 在 Gatsby Single Post 中渲染来自 WordPress 帖子内容的图像

Question

当我在我的 Gatsby 博客中呈现来自 Wordpress 的帖子内容时，图像保持相同的远程 url。

我该如何解决这个问题？所有其他从 ACF、特色 img 等获取的图像都运行良好。

我在 Gatsby 中的 post.js 组件:

*imports......*

const postTemplate = ({ data: { post } }) => (
  <Layout>   
    <div className="container">
      <div className="row" style={{ marginBottom: '40px' }}>
        <PostSidebar
          date={post.date}
          author={post.author.name}
          categories={post.categories}
        />
        <PostContent className="col-lg-9">
          <h1 dangerouslySetInnerHTML={{ __html: post.title }} />
          <div dangerouslySetInnerHTML={{ __html: post.content }} />
        </PostContent>
      </div>
    </div>
  </Layout>
)

postTemplate.propTypes = {
  data: PropTypes.object.isRequired
}

export default postTemplate

export const pageQuery = graphql`
  query($id: String!) {
    post: wordpressPost(id: { eq: $id }) {
      title
      content
      author {
        name
      }
      date(formatString: "DD, MMMM, YYYY",  locale: "pt")
      categories {
        id
        name
        slug
      }
    }
  }
`

Answer 1

根据一些 GitHub 线程，gatsby-source-wordpress 直到版本 +4 才支持使用上传的 WYSYWIG 图像:

• https://github.com/gatsbyjs/gatsby/issues/11179
• https://github.com/gatsbyjs/gatsby/issues/3733
• https://github.com/TylerBarnes/gatsby-wordpress-inline-images : 创建此插件是为了绕过帖子内容的这种限制

根据 CHANGELOG.md 版本 4 于 2021/02/04 发布并且，根据发帖日期 (2020/09/30)，您的问题应该已通过上传您的插件版本得到解决。