A Directive for setting fall back image in a vue js application if in case image is not loaded

Overview

vue-fall-back-image-directive

A Directive for setting fall back image in a vue js application.

Installation

  • npm install

Run npm install --save vue-fall-back-image-directive

  • With Modules

This Custom directive can be used globally or locally based on app use case.

Global usage

// ES6
// Inside  main.js you can register directives globally

import Vue from "vue";
import ImageFallBack from "vue-fall-back-image-directive";

Vue.directive("image-fall-back", ImageFallBack);

Local usage

// ES6
import Vue from "vue";
import ImageFallBack from "vue-fall-back-image-directive";

// Inside  App.vue or any other components add directives object

directives: {
  ImageFallBack;
}

Usage

To use this plugin, simply add the v-image-fall-back directive in img tag.

">
<img v-image-fall-back src="image url to load" />

<img v-image-fall-back="settings" src="image url to load" />
let settings = {
  imageLoader: "enter image loader url here",
  fallBackImage: "enter fall back image url here"
};

Working

Img tag will try to load image, if the image is not loaded it will try to load default fall back url in the package. you can also specify your custom fall back image and loader indicating the image loading.

License

wtfpl

You might also like...
A Photo Search Application Which Using Unsplash API
A Photo Search Application Which Using Unsplash API

photo-search A photo search application which using unsplash api Project setup B

Vue progressive image loader plugin like Medium
Vue progressive image loader plugin like Medium

vue-image-loader Vue progressive image loading plugin Article here : https://www.kevindesousa.me/vue-image-loader/ Installation $ npm install @kevinde

🙋‍♀ī¸ Image magic animation drawing effect component for Vue 2.x | 回像动态įģ˜åˆļ效果
🙋‍♀ī¸ Image magic animation drawing effect component for Vue 2.x | 回像动态įģ˜åˆļ效果

vue-image-painter English | įŽ€äŊ“中文 🌰 Example Demo Demo Source Code 🚀 QuickStart Install yarn add vue-image-painter # OR npm i -S vue-image-painter Imp

A Vue.js 3.0 image lightbox component with Zoom / Drag / Rotate / Switch .

A Vue.js 3.0 image lightbox component with Zoom / Drag / Rotate / Switch .

 Imagvue is an image component for Vue.js
Imagvue is an image component for Vue.js

Imagvue Imagvue provides basic image processing props(size,blur,contrast,grayscale, etc.). Support image lazy loading. All Attributes can bind with da

Image comparison slider. Compare images before and after. Supports React, Vue, Angular.
Image comparison slider. Compare images before and after. Supports React, Vue, Angular.

Image comparison slider. Compare images before and after. Supports React, Vue, Angular.

Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js

Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js

🌉 Vue Image Placeholder component
🌉 Vue Image Placeholder component

Vue Image Placeholder 🌉 Multiservice Image Placeholder Vue component Installation yarn add vue-image-placeholder Use it in your app import ImagePlace

A Vue.js component to lazy load an image automatically when it enters the viewport using the Intersection Observer API.

A Vue.js component to lazy load an image automatically when it enters the viewport using the Intersection Observer API.

Owner
Arun sivan
Technology enthusiast | Social Thinker Senior Software Engineer
Arun sivan
Vue image placeholder directive for broken images.

Vue Image Fallback v-img-fallback Vue image placeholder directive for broken images. If you like this project, please give it a star, and consider fol

Joff Tiquez 46 Oct 13, 2022
An image finder application leveraging the Pexels api, You can also download your favorite Images too

Pexelry ?? Pexelry is an image finder web application that leverages the Pexels api to find images related to a specific search. Prerequisites Get an

Junior Developer 4 Aug 25, 2022
image-diff client: client web application to compare multiple images. online demo -

image-diff client web application to compare multiple images. you can pan, zoom and diff multiple images at the same time. currently support 8bit jpg,

Junik Jo 5 Mar 29, 2022
Spacestagram - Web application that shares photos from NASA's today's image API

?? Spacestagram A webpage that pulls images using the NASA's "Picture of The Day

Alain Nguyen 2 Jan 27, 2022
A Vue component for showing loader during image loading https://john015.github.io/vue-load-image/

English | 한ęĩ­ė–´ Vue-load-image Vue-load-image is 1KB(gzipped size) minimalist Vue component that display loader during image loading and display alterna

Sangwon Lee 60 Dec 7, 2022
Vue-image-loader: image loader for vue js with prevue

Vue-image-loader: image loader for vue js with prevue

null 0 Feb 1, 2020
🌈 A Vue image component. Simple realization of image shadow.

?? vue-image-shadow A Vue image component. Simple realization of image shadow. ?? Example Online: https://image-component.github.io/vue-image-shadow/

null 21 Aug 13, 2022
vue-image-markup will provide you to edit uploaded image easily and save it.

Markup Image with Vue.js (customizable) vue-image-markup will provide you to edit uploaded image easily and save it. Installation npm i vue-image-mark

Lionix 92 Dec 9, 2022
🎨 A vue directive for the cosha library

vue-cosha Vue cosha is a simple port of the cosha library for ease of use in Vue projects. "Colorful shadows for your images. ?? " cosha lets you add

Josh King 78 Oct 25, 2022
A directive supported plugin for PhotoSwipe in Vue.js components.

vue-photoswipe.js A directive supported plugin for PhotoSwipe in Vue.js components. install npm i vue-photoswipe.js -s Import photoswipe component and

Emil Zhai 1 Jul 6, 2020