@praffn/vue-dato-image

Vue Dato Image

Component for workig with images in DatoCMS.

Installation

npm install @praffn/vue-dato-image

or

yarn add @praffn/vue-dato-image

Usage

<template>
  <div>
    <DatoImage v-if="imageData" :data="imageData" />
  </div>
</template>

<script>
import gql from "graphql-tag";

export default {
  data() {
    return {
      imageData: null,
    };
  },
  async mounted() {
    const { data } = await this.$dato({
      query: gql`
        {
          page {
            image {
              responsiveImage {
                alt
                title
                base64
                bgColor
                width
                height
                sizes
                srcSet
                webpSrcSet
                src
              }
            }
          }
        }
      `,
    });
    this.imageData = data.page.image;
  },
};
</script>

Props

prop	type	required	description	default
data	ResponsiveImage object	✅	The responsive you get from a DatoCMS reponsiveImage query	—
fadeInDuration	number	❌	Duration (in ms) of the fade in transition when image has loaded	null
intersectionTreshold	number	❌	A value between 0.0 and 1.0 indicating at what percentage of the placeholder visibility that the image should start loading. 0.0 meas at soon as just one pixel is in the viewport and 1.0 means that the entire placeholder has to be in the viewport to start loading the actual image.	0.0
intersectionMargin	string	❌	The margins around the placeholder when considering intersection. Value should be like the CSS counterpart (top, right, bottom, left) and can be pixels as well as percentages. Used to compute the bounding box before computing intersection.	"0px 0px 0px 0px"
lazyload	boolean	❌	Whether lazy loading is enabled or not. If not enabled the image will be eagerly loaded and intersection will not be computed.	true

The ResponsiveImage object

This should be the object returned from your GraphQL query. There are some required properties:

property	type	required	description
aspectRatio	number	✅	The aspect ratio of the image
width	number	✅	The width of the image
height	number	✅	The height of the image
sizes	string	✅	The HTML5 sizes attribute for the image
srcSet	string	✅	The HTML5 srcset attribute for the image
webpSrcSet	string	❌	The HTML5 srcset attribute for the image in WebP format (for browsers that support that)
alt	string	❌	Alternative text alt for the image. Not required but recommended for acceisiblity reasons if the image is important for the content
title	string	❌	Title attribute title for the image
bgColor	string	❌	The background color for the image placeholder
base64	string	❌	A base64-encoded thumbnail used for the placeholder