js-vue-swipe图片放大—踩坑_vue怎么通过swiper组件实现浏览商品时图片放大-优快云博客

本文链接：https://blog.youkuaiyun.com/wangkaipeng1/article/details/100545075

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基于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.clouddn.com/preview3.jpg',
	        'http://oayhezji6.bkt.clouddn.com/preview9.jpg',
	        'http://oayhezji6.bkt.clouddn.com/preview10.jpg',
	        'http://oayhezji6.bkt.clouddn.com/preview6.jpg'
	      ]
	    }
	  },
	  created() {
	  },
	  methods: {
	    preview(index) {
	      this.$imagePreview({
	        images: this.images,
	        index: index,
	      })
	    }
	  }
	}
	</script>

上面是官方给的文档例子，可是关于this.$imagePreview中的images官方的解释为：图片的url数组

可是却没有说明一个坑：当传递到的images图片的url链接没有在页面进行加载的时候(没有使用img标签引用)，那么第一次调用$imagePreview会导致图片无法显示

解决方案：
将 images数组的url数组进入页面的时候，使用img标签提前进行预加载，加上css display:none不显示即可