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 vue-datocms
that exposes an <datocms-image />
component that pairs perfectly with the responsiveImage
query:
To take advantage of it, install the vue-datocms
package:
npm install --save vue-datocms
Then, inside your page, feed content coming from a responsiveImage
query directly into the <Image />
component:
<template><div><div v-if="loading">Loading...</div><div v-else-if="error">Something bad happened!</div><div v-else><article v-for="blogPost of data.allBlogPosts" v-bind:key="blogPost.id"><h6>{{blogPost.title}}</h6><datocms-image :data="blogPost.coverImage.responsiveImage" /></article></div></div></template><script>import { request } from "./datocms";import { Image } from "vue-datocms";const HOMEPAGE_QUERY = `query HomePage($limit: IntType) {allBlogPosts(first: $limit) {idtitlecoverImage {responsiveImage(imgixParams: { fit: crop, w: 300, h: 300, auto: format }) {srcSetwebpSrcSetsizessrcwidthaspectRatioalttitlebase64}}}}`;export default {name: "App",components: {"datocms-image": Image},data: () => ({data: null,error: null,loading: true}),async mounted() {try {this.data = await request({query: HOMEPAGE_QUERY,variables: {limit: 10}});} catch (e) {this.error = e;}this.loading = false;}};</script>