@voorhoede/vue-dato-image (1.10.4)

# @voorhoede/vue-dato-image

Fully optimized image component for images from Dato CMS.

<vue-dato-image :image={ image } />

View source code on github.

# Features

  • Works out-of-the-box with DatoCMS image file field.
  • Uses a responsive image strategy, that only loads the optimal sized file. For example, high-resolution images will be replaced with a smaller version on mobile devices.
  • Has a fixed ratio, so space is reserved before the image is loaded. This prevents annoying layout jumps.
  • Supports an optional image caption.
  • Uses lowest acceptable quality, so images load as quickly as possible while preventing quality loss.
  • Supports WebP, a new, modern, image file type with the lowest possible file size.
  • Lazy loads images, meaning files will only be downloaded when necessary, resulting in much faster page loads.
  • Has broken image styling, used in case an image can not be loaded or does not exist.

# Installation

npm install vue-dato-image

# Usage

# Bundler (Webpack, Rollup)

import Vue from 'vue'
import VueDatoImage from '@voorhoede/vue-dato-image'

Vue.use(VueDatoImage)

The CSS file should be imported seperately in the way you desire. It's located at @voorhoede/vue-dato-image/dist/vue-dato-image.css.

# Browser

<!-- Include after Vue -->
<!-- Local files -->
<script src="vue-dato-image/dist/vue-dato-image.js"></script>

<!-- From CDN -->
<script src="https://unpkg.com/@voorhoede/vue-dato-image"></script>

# Examples

# Bitmap image

# Vector image

# Placeholder color

# With caption

# Additional parameters

# API

# vue-dato-image

# slots

  • default Will be rendered as the figcaption tag

# props

  • image Object (required)

    Object retreived from Dato image field. It should contain the url, width, height and format properties.

  • width-step Number (optional) default: 100

  • placeholder-color String (optional) default: 'transparent'

    Color filling up the space when the image is loading.

  • parameters Object (optional) default: [object Object]

    Additional parameters for image manipulation. (more info)