Vanilla React > Managing images

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 offer 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;