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 setup>import { ref, onMounted } from 'vue'import { Image as DatocmsImage } from "vue-datocms";import { request } from "./datocms";const data = ref(null);const error = ref(null);const loading = ref(true);const HOMEPAGE_QUERY = `query HomePage($limit: IntType) {allBlogPosts(first: $limit) {idtitlecoverImage {responsiveImage(imgixParams: { fit: crop, w: 300, h: 300, auto: format }) {srcSetwebpSrcSetsizessrcwidthaspectRatioalttitlebase64}}}}`;onMounted(async () => {try {data.value = await request({query: HOMEPAGE_QUERY,variables: {limit: 10}});} catch (e) {error.value = e;}loading.value = false;})</script>