vuetify-image

Image component for Vuetify.js

Installation

fire-up a terminal and type:

npm i -S vuetify vuetify-image # vuetify is required! 

then in JS:

import Vue from 'vue'
import Vuetify from 'vuetify'
import VImage from 'vuetify-image'
 
Vue.use(Vuetify)
Vue.use(VImage)

Features

• built on top of Material Design and Vuetify.js
• can show you loading and errors
• highly customizable
• ability to use fallback source

Example

To create an image with loader and error indicator, just use this piece of code:

<v-image :src='url' />

Props

• src: Image Source (required)
• errorIcon: Icon to show in error indicator (default: broken_image)
• errorColor: Color of error indicator (default: error)
• loadingColor: Color of loading indicator (default: primary lighten-5)
• spinnerColor: Color of loading spinner (default: primary lighten-1)
• aspectRatio: aspect ratio of indicators (in x:y format, default: 16:9),
• fallbackSrc: fallback image source