js-vue-swipe图片放大—踩坑

最新推荐文章于 2024-08-16 07:47:47 发布

wangkaipeng1

最新推荐文章于 2024-08-16 07:47:47 发布

阅读量1.5k

点赞数

分类专栏： js 文章标签： vue 图片放大 swipe

本文链接：https://blog.csdn.net/wangkaipeng1/article/details/100545075

版权

本文介绍了在Vue项目中利用Photoswipe实现图片预览功能时遇到的问题，即当图片URL未在页面加载时，首次调用预览可能导致图片无法显示。解决方案是通过在页面加载时使用隐藏的img标签对images数组中的URL进行预加载。

摘要由CSDN通过智能技术生成

基于photoswipe实现的vue图片预览组件

安装
```
	npm install vue-image-swipe -D
```

引用

	import Vue from 'vue'
	import VueImageSwipe from 'vue-image-swipe'
	import 'vue-image-swipe/dist/vue-image-swipe.css'
	Vue.use(VueImageSwipe)

使用

	<template>
	<div>
	  hello world
	  <div>
	    <ul>
	      <li
	        :key="index"
	        @click="preview(index)"
	        v-for="(l, index) in images">
	         <img :src="l" alt="">
	      </li>
	    </ul>
	  </div>
	</div>
	</template>
	<script>
	export default {
	  name: 'app',
	  data() {
	    return {
	      images: [
	        'http://oayhezji6.bkt.clouddn.com/preview1.jpg',
	        'http://oayhezji6.bkt.clouddn.com/preview2.jpg',
	        'http://oayhezji6.bkt.cloud