CODEWITHSUNDEEP
reactjsgatsby
Ricardo de Paula
Ricardo de Paula

Reputation: 632

Render image from WordPress post content in Gatsby Single Post

When I render a post content form Wordpress inside my Gatsby blog, the image keeps the same remote url.

enter image description here

How can I solve This? All other fetched images from ACF, Featured img, etc is working great.

my post.js component inside Gatsby:

*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
      }
    }
  }
`

Upvotes: 3

Views: 767

Answers (1)

Ferran Buireu
Ferran Buireu

Reputation: 29335

According to some GitHub threads, using uploaded WYSYWIG images was not supported by gatsby-source-wordpress until version +4:

Version 4 was released on 2021/02/04 according to the CHANGELOG.md and, according to the date of the post (2020/09/30), your issue should be fixed uploading your plugin's version.

Upvotes: 1

Related Questions