Managing images

    One of the mayor 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;