背景

因项目需要，需要一款同时支持预览图片和视频的组件。最终选择vue-gallery实现。

项目地址：https://github.com/RobinCK/vue-gallery

安装

npm

npm install vue-gallery

yarn

yarn add vue-gallery

官网使用示例

<template><div><gallery :images="images" :index="index" @close="index = null"></gallery><divclass="image"v-for="(image, imageIndex) in images":key="imageIndex"@click="index = imageIndex":style="{ backgroundImage: 'url(' + image + ')', width: '300px', height: '200px' }"></div></div>
</template><script>import VueGallery from 'vue-gallery';export default {data: function () {return {images: ['https://dummyimage.com/800/ffffff/000000','https://dummyimage.com/1600/ffffff/000000','https://dummyimage.com/1280/000000/ffffff','https://dummyimage.com/400/000000/ffffff',],index: null};},components: {'gallery': VueGallery},}
</script> <style scoped>.image {float: left;background-size: cover;background-repeat: no-repeat;background-position: center center;border: 1px solid #ebebeb;margin: 5px;}
</style>

存在问题

官网示例中只提供了图片预览示例，并未提供视频预览示例，起初直接将视频地址加入images列表，视频不能正常预览。

解决思路

通过分析vue-gallery的依赖，发现依赖blueimp-gallery组件。

官网地址为https://blueimp.github.io/Gallery/

blueimp-gallery支持预览图片和视频，官方示例代码如下：

blueimp.Gallery([{title: 'Fruits',type: 'video/mp4',href: 'https://example.org/videos/fruits.mp4',poster: 'https://example.org/images/fruits.jpg'},{title: 'Banana',type: 'image/jpeg',href: 'https://example.org/images/banana.jpg',thumbnail: 'https://example.org/thumbnails/banana.jpg'}
])

The Gallery uses the type property to determine the content type of the object to display.
If the type property is empty or doesn't exist, the default type image is assumed.
Objects with a video type will be displayed in a HTML5 video element if the browser supports the video content type.

For videos, the poster property defines the URL of the poster image to display, before the video is started.

参考官网改造images列表，改造后如下：

images: [{title: 'Fruits',type: 'video/mp4',href: 'https://example.org/videos/fruits.mp4',poster: 'https://example.org/images/fruits.jpg'},{title: 'Banana',type: 'image/jpeg',href: 'https://example.org/images/banana.jpg',thumbnail: 'https://example.org/thumbnails/banana.jpg'}
],

改造后的页面：

<template><div><gallery :images="images" :index="index" @close="index = null"></gallery><divclass="image"v-for="(image, imageIndex) in images":key="imageIndex"@click="index = imageIndex":style="{ backgroundImage: 'url(' + image + ')', width: '300px', height: '200px' }"></div></div>
</template><script>import VueGallery from 'vue-gallery';export default {data: function () {return {images: [{title: 'Fruits',type: 'video/mp4',href: 'https://example.org/videos/fruits.mp4',poster: 'https://example.org/images/fruits.jpg'},{title: 'Banana',type: 'image/jpeg',href: 'https://example.org/images/banana.jpg',thumbnail: 'https://example.org/thumbnails/banana.jpg'}],index: null};},components: {'gallery': VueGallery},}
</script> <style scoped>.image {float: left;background-size: cover;background-repeat: no-repeat;background-position: center center;border: 1px solid #ebebeb;margin: 5px;}
</style>

Vue图片、视频预览组件（vue-gallery）相关推荐

VUE-PDF VUE的PDF预览组件
VUE-PDF VUE的PDF预览组件 vue.js pdf viewer 安装 npm install --save vue-pdf 示例 <template><pdf src=& ...
基于Vue框架的预览组件xh-image-preview
xh-image-preview 基于vue图片预览插件说明具有预览图片基本功能:放大.缩小.1:1.旋转.拖拽.左右切换灵活配置:支持图片预览窗尺寸.操作按钮键可配置使用 #安装 npm i ...
vue中pdf预览组件_Vue+ElementUI使用vue-pdf实现预览功能
Vue + ElementUI项目中使用vue-pdf实现简单预览,供大家参考,具体内容如下 1.安装 vue-pdf npm install --save vue-pdf 2.在vue页面中导入对应 ...
图片视频预览开启和关闭脚本 Xp
关闭缩略图 regsvr32 /u shmedia.dll 开启缩略图 regsvr32 shmedia.dll 关闭缩略图 regsvr32 /u shimgvw.dll 开启缩略图 regsvr3 ...
vue 封装图片预览组件
因项目需要,自己封装了个vue图片预览组件 <template><div class="imgs_previews animated" @mousewheel.p ...
antd vue upload组件上传视频并实现视频预览
antd vue upload组件上传视频并实现视频预览 html代码 <form><a-form-itemlabel="商品视频":labelCol=" ...
基于 vue 编写的vue图片预览组件，支持单图和多图预览，仅传入一个图片地址，即可实现图片预览效果，可自定义背景、按钮颜色等
hevue-img-preview 简介完整版下载地址:基于 vue 编写的vue图片预览组件本组件是一个基于 vue 编写的 vue 图片预览组件,支持 pc 和手机端,支持单图和多图预览,仅传 ...
pc 图片预览放大端vue_移动端Vue.js的图片预览组件，支持放缩、滑动功能！
功能:图片预览组件,支持双手指放大/缩小,双击放大/缩小,单击消失隐藏. 注:touch事件请手机预览源码分享组件参数 data() { return { loading: 2, // 1成功 2 ...
vue移动端图片预览组件
更新说明:1.02版本采用show属性值控制组件的显示与隐藏,不再使用v-if!! 安装:npm install -s w-previewimg 或 yarn add w-previewimg 在线预 ...
VUE+ELE图片预览组件
1.首先添加图片点击事件 <el-image :src="xxx" @click="handlePreview()" /> 2.增加预览组件imag ...

Vue图片、视频预览组件（vue-gallery）

背景

安装

官网使用示例

存在问题

解决思路

Vue图片、视频预览组件（vue-gallery）相关推荐

最新文章

热门文章