How to use lazy loading with Contentful

Viewed 288

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).

0 Answers
Related