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

背景因项目需要，需要一款同时支持预览图片和视频的组件。最终选择vue-gallery实现。项目地址：https://github.com/RobinCK/vue-gallery安装npmnpm install vue-galleryyarnyarn add vue-gallery官网使用示例<template><div><gallery :images="images

dongyuan234

11337人浏览 · 2021-08-26 11:25:16

dongyuan234 · 2021-08-26 11:25:16 发布

背景

因项目需要，需要一款同时支持预览图片和视频的组件。最终选择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>
    <div
      class="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>
    <div
      class="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>