Loading responsive, progressive images from DatoCMS

    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 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) {
    id
    title
    coverImage {
    responsiveImage(imgixParams: { fit: crop, w: 300, h: 300, auto: format }) {
    srcSet
    webpSrcSet
    sizes
    src
    width
    aspectRatio
    alt
    title
    base64
    }
    }
    }
    }`;
    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>