React > Managing images

One of the major advantages of using DatoCMS instead of any other content management systems is its responsiveImage query, which will return pre-computed image attributes that will help you setting up responsive images in your frontend without any additional manipulation.

To make it even easier to offer responsive, progressive, lazy-loaded images on your projects, we released a package called react-datocms that exposes an <Image /> component and pairs perfectly with the responsiveImage query:

To take advantage of it, install the react-datocms package:

yarn add react-datocms

Then, inside your page, feed content coming from a responsiveImage query directly into the <Image /> component:

import React from "react";
import { useQuery } from "graphql-hooks";
import { Image } from 'react-datocms';
import "./App.css";
const HOMEPAGE_QUERY = `query HomePage($limit: IntType) {
  allBlogPosts(first: $limit) {
    title
    coverImage {
      responsiveImage(imgixParams: { fit: crop, w: 300, h: 300, auto: format }) {
        srcSet
        webpSrcSet
        sizes
        src
        width
        height
        aspectRatio
        alt
        title
        base64
      }
    }
  }
}`;
function App() {
  const { loading, error, data } = useQuery(HOMEPAGE_QUERY, {
    variables: {
      limit: 10
    }
  });
  if (loading) return "Loading...";
  if (error) return "Something Bad Happened";
  return (
    <div className="App">
      {data.allBlogPosts.map(blogPost => (
        <article>
          <Image data={blogPost.coverImage.responsiveImage} />
          <h6>{blogPost.title}</h6>
        </article>
      ))}
    </div>
  );
}
export default App;