2

I'm using Contentful's long text to write my articles, which I'd like to then display on my website. I'm also adding images within the long text field, but I can't figure out how to use lazy loading to display them on the website.

I'm querying for the article like this:

query MyQuery {
  allContentfulBlogPost {
    nodes {
      article {
        childrenMarkdownRemark {
          html
        }
      }
    }
  }
}

Then I'm just inserting the HTML like this:

const article = data.contentfulBlogPost.article.childMarkdownRemark.html;

<section className={styles.article} dangerouslySetInnerHTML={{__html: article}}/>

Any idea how could I use lazy loading to display the images I have in the "articles"? Or should I use rich text instead of "normal" long text when I'm also adding images? (I had some problems with rich text and didn't know to display it on the website).

btm2424
  • 581
  • 6
  • 16
  • 2
    Hey there, yes it's probably better for you to use Rich Text in this instance. You have much more control over how each 'node' returned by Rich Text is returned this way. Check out this article to see if it gives you the information you need (the examples are in React). https://www.contentful.com/blog/2021/04/14/rendering-linked-assets-entries-in-contentful/ This specific article about Gatsby should help too: https://www.contentful.com/developers/docs/tutorials/general/rich-text-and-gatsby/ – whitep4nth3r Jul 16 '21 at 08:23

0 Answers0