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
Install from NPM
npm install v-viewer viewerjs
To use v-viewer, simply import it and the css file, and call app.use() to install.
The component, directive and api will be installed together in the global.
Two different API styles are both supported: Options API and Composition API.
import { createApp } from 'vue'
import App from './App.vue'
import 'viewerjs/dist/viewer.css'
import VueViewer from 'v-viewer'
const app = createApp(App)
app.use(VueViewer)
app.mount('#app')
<template>
<div>
<!-- directive -->
<div class="images" v-viewer>
<img v-for="src in images" :key="src" :src="src">
</div>
<!-- component -->
<viewer :images="images">
<img v-for="src in images" :key="src" :src="src">
</viewer>
<!-- api -->
<button type="button" @click="show">Click to show</button>
</div>
</template>
<!-- Options API -->
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
data() {
return {
images: [
"https://picsum.photos/200/200",
"https://picsum.photos/300/200",
"https://picsum.photos/250/200"
]
}
},
methods: {
show() {
this.$viewerApi({
images: this.images
})
}
}
})
</script>
<!-- Composition API -->
<!-- <script lang="ts" setup>
import { api as viewerApi } from 'v-viewer'
const images = [
"https://picsum.photos/200/200",
"https://picsum.photos/300/200",
"https://picsum.photos/250/200"
]
const show = () => {
viewerApi({
images
})
}
</script> -->
<link href="//unpkg.com/viewerjs/dist/viewer.css" rel="stylesheet">
<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/viewerjs/dist/viewer.js"></script>
<script src="//unpkg.com/v-viewer/dist/index.umd.js"></script>
<script>
app.use(VueViewer.default)
</script>
var VueViewer = require('VueViewer')
require(['VueViewer'], function (VueViewer) {});
Just add the directive v-viewer to any element, then all img elements in it will be handled by viewer.
You can set the options like this: v-viewer="{inline: true}"
Get the element by selector and then use el.$viewer to get the viewer instance if you need.
<template>
<div>
<div class="images" v-viewer="{movable: false}">
<img v-for="src in images" :src="src" :key="src">
</div>
<button type="button" @click="show">Show</button>
</div>
</template>
<!-- Options API -->
<script lang="ts">
import { defineComponent } from 'vue'
import 'viewerjs/dist/viewer.css'
import { directive as viewer } from "v-viewer"
export default defineComponent({
directives: {
viewer: viewer({
debug: true
})
},
data() {
return {
images: [
"https://picsum.photos/200/200",
"https://picsum.photos/300/200",
"https://picsum.photos/250/200"
]
}
},
methods: {
show () {
const viewer = this.$el.querySelector('.images').$viewer
viewer.show()
}
}
})
</script>
<!-- Composition API -->
<!-- <script lang="ts" setup>
import 'viewerjs/dist/viewer.css'
import { directive as viewer } from "v-viewer"
const vViewer = viewer({
debug: true
})
const images = [
"https://picsum.photos/200/200",
"https://picsum.photos/300/200",
"https://picsum.photos/250/200"
]
const show = () => {
const viewer = document.querySelector('.images').$viewer
viewer.show()
}
</script> -->
The viewer instance will be created only once after the directive binded.
If you're sure the images inside this element won't change again, use it to avoid unnecessary re-render.
<div class="images" v-viewer.static="{inline: true}">
<img v-for="src in images" :src="src" :key="src">
</div>
The viewer instance will be updated by update method when the source images changed (added, removed or sorted) by default.
If you encounter any display problems, try rebuilding instead of updating.
<div class="images" v-viewer.rebuild="{inline: true}">
<img v-for="src in images" :src="src" :key="src">
</div>
You can simply import the component and register it locally too.
<template>
<div>
<viewer :images="images"
@inited="inited"
class="viewer"
ref="viewer"
>
<template #default="scope">
<img v-for="src in scope.images" :src="src" :key="src">
{{scope.options}}
</template>
</viewer>
<button type="button" @click="show">Show</button>
</div>
</template>
<!-- Options API -->
<script lang="ts">
import { defineComponent } from 'vue'
import 'viewerjs/dist/viewer.css'
import { component as Viewer } from "v-viewer"
export default defineComponent({
components: {
Viewer,
},
data() {
return {
images: [
"https://picsum.photos/200/200",
"https://picsum.photos/300/200",
"https://picsum.photos/250/200"
]
}
},
methods: {
inited (viewer) {
this.$viewer = viewer
},
show () {
this.$viewer.show()
}
}
})
</script>
<!-- Composition API -->
<!-- <script lang="ts" setup>
import 'viewerjs/dist/viewer.css'
import { component as Viewer } from "v-viewer"
const images = [
"https://picsum.photos/200/200",
"https://picsum.photos/300/200",
"https://picsum.photos/250/200"
]
let $viewer:any = null
const inited = (viewer) => {
$viewer = viewer
}
const show = () => {
$viewer.show()
}
</script> -->
ArrayObjectYou can replace images with trigger, to accept any type of prop.
when the trigger changes, the component will re-render the viewer.
<viewer :trigger="externallyGeneratedHtmlWithImages">
<div v-html="externallyGeneratedHtmlWithImages"/>
</viewer>
BooleanfalseThe viewer instance will be updated by update method when the source images changed (added, removed or sorted) by default.
If you encounter any display problems, try rebuilding instead of updating.
<viewer
ref="viewer"
:options="options"
:images="images"
rebuild
class="viewer"
@inited="inited"
>
<template #default="scope">
<img v-for="src in scope.images" :src="src" :key="src">
{{scope.options}}
</template>
</viewer>
ViewerListen for the inited event to get the viewer instance, or use this.refs.xxx.$viewer.
Only available in modal mode.
You can call the function: this.$viewerApi({options: {}, images: []}) to show gallery without rendering the img elements yourself.
The function returns the current viewer instance.
<template>
<div>
<button type="button" class="button" @click="previewURL">URL Array</button>
<button type="button" class="button" @click="previewImgObject">Img-Object Array</button>
</div>
</template>
<!-- Options API -->
<script lang="ts">
import { defineComponent } from 'vue'
import 'viewerjs/dist/viewer.css'
import { api as viewerApi } from "v-viewer"
export default defineComponent({
data() {
return {
sourceImageURLs: [
'https://picsum.photos/200/200?random=1',
'https://picsum.photos/200/200?random=2'
],
sourceImageObjects: [
{
'src': 'https://picsum.photos/200/200?random=3',
'data-source': 'https://picsum.photos/800/800?random=3'
},
{
'src': 'https://picsum.photos/200/200?random=4',
'data-source': 'https://picsum.photos/800/800?random=4'
}
]
}
},
methods: {
previewURL () {
// If you use the `app.use` full installation, you can use `this.$viewerApi` directly like this
const $viewer = this.$viewerApi({
images: this.sourceImageURLs
})
},
previewImgObject () {
// Or you can just import the api method and call it.
const $viewer = viewerApi({
options: {
toolbar: true,
url: 'data-source',
initialViewIndex: 1
},
images: this.sourceImageObjects
})
}
}
})
</script>
<!-- Composition API -->
<!-- <script lang="ts" setup>
import 'viewerjs/dist/viewer.css'
import { api as viewerApi } from 'v-viewer'
const sourceImageURLs = [
'https://picsum.photos/200/200?random=1',
'https://picsum.photos/200/200?random=2'
]
const sourceImageObjects = [
{
src: 'https://picsum.photos/200/200?random=3',
'data-source': 'https://picsum.photos/800/800?random=3'
},
{
src: 'https://picsum.photos/200/200?random=4',
'data-source': 'https://picsum.photos/800/800?random=4'
}
]
const previewURL = () => {
// If you use the `app.use` full installation, you can use `this.$viewerApi` directly like this
const $viewer = this.$viewerApi({
images: sourceImageURLs
})
}
const previewImgObject = () => {
// Or you can just import the api method and call it.
const $viewer = viewerApi({
options: {
toolbar: true,
url: 'data-source',
initialViewIndex: 1
},
images: sourceImageObjects
})
}
</script> -->
Refer to viewer.js.
StringviewerIf you need to avoid name conflict, you can import it like this:
import { createApp } from 'vue'
import 'viewerjs/dist/viewer.css'
import VueViewer from 'v-viewer'
import App from './App.vue'
export const app = createApp(App)
app.use(VueViewer, {
name: 'vuer',
debug: true,
})
app.mount('#app')
<template>
<div>
<!-- directive name -->
<div class="images" v-vuer="{movable: false}">
<img v-for="src in images" :src="src" :key="src">
</div>
<button type="button" @click="show">Show</button>
<!-- component name -->
<vuer :images="images">
<img v-for="src in images" :src="src" :key="src">
</vuer>
</div>
</template>
<!-- Options API -->
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
data() {
return {
images: [
"https://picsum.photos/200/200",
"https://picsum.photos/300/200",
"https://picsum.photos/250/200"
]
};
},
methods: {
show () {
// viewerjs instance name
const vuer = this.$el.querySelector('.images').$vuer
vuer.show()
// api name
this.$vuerApi({
images: this.images
})
}
}
})
</script>
<!-- Composition API -->
<script lang="ts" setup>
import { api as vuerApi } from 'v-viewer'
const images = [
"https://picsum.photos/200/200",
"https://picsum.photos/300/200",
"https://picsum.photos/250/200"
]
const show = () => {
// viewerjs instance name
const vuer = document.querySelector('.images').$vuer
vuer.show()
// api name
vuerApi({
images
})
}
</script>
ObjectundefinedIf you need to set the viewer default options, you can import it like this:
import { createApp } from 'vue'
import 'viewerjs/dist/viewer.css'
import VueViewer from 'v-viewer'
import App from './App.vue'
export const app = createApp(App)
app.use(VueViewer, {
defaultOptions: {
zIndex: 9999
}
})
app.mount('#app')
And you can reset the default options at any other time:
import VueViewer from 'v-viewer'
VueViewer.setDefaults({
zIndexInline: 2021,
})
FAQs
Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js
The npm package v-viewer receives a total of 20,685 weekly downloads. As such, v-viewer popularity was classified as popular.
We found that v-viewer demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.