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) {titlecoverImage {responsiveImage(imgixParams: { fit: crop, w: 300, h: 300, auto: format }) {srcSetwebpSrcSetsizessrcwidthheightaspectRatioalttitlebase64}}}}`;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;