快捷導(dǎo)航

vue-photo-preview圖片預(yù)覽失效的問(wèn)題及解決

更新時(shí)間：2022年09月01日 15:49:05 作者：喜大普奔???

這篇文章主要介紹了vue-photo-preview圖片預(yù)覽失效的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue-photo-preview圖片預(yù)覽失效

<img
    class="pic"
    v-for="(item,index) of imgList"
    :key="index"
    :src="item.smallFileName"
    :large="item.fileName"
    preview="0"
    preview-text="癥狀圖片"
>

imgList是異步獲取數(shù)據(jù)的時(shí)候在獲取數(shù)據(jù)后需要調(diào)用this.$previewRefresh();刷新重置一下，否則~~不生效

圖片預(yù)覽vue-photo-preview的使用

應(yīng)用場(chǎng)景

點(diǎn)擊圖片，能夠以類似朋友圈的方式展示圖片，主要功能：預(yù)覽，放大。

選擇

經(jīng)過(guò)網(wǎng)上一番查閱，有三款插件比較不錯(cuò)，分別是 viewerjs、vue-photo-preview 以及 vue-picture-preview。經(jīng)過(guò)簡(jiǎn)單比較，viewerjs 功能比較強(qiáng)大，更適合web端。vue-picture-preview 只有預(yù)覽和切換上下張功能，無(wú)法滿足全部需求。故優(yōu)先選擇vue-photo-preview。

使用

1、安裝

npm install vue-photo-preview --save

2、注冊(cè)和配置

import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
?
let options = {
? fullscreenEl: false,
}
Vue.use(preview, options)
Vue.use(preview)

3、使用

<img src="xxx.jpg" large="xxx_2x.jpg" preview="1" preview-text="描述">

preview值相同為同組圖片。preview-text為預(yù)覽時(shí)下方描述文字。 img的src默認(rèn)為縮略圖，如不填寫(xiě)large，則展示src。若有l(wèi)arge，則顯示large大圖。

注意

1、上面為簡(jiǎn)單使用，option其實(shí)還有更多可配置項(xiàng)，例如：

let options = {
? fullscreenEl: false, //控制是否顯示右上角全屏按鈕
? closeEl: false, //控制是否顯示右上角關(guān)閉按鈕
? tapToClose: true, //點(diǎn)擊滑動(dòng)區(qū)域應(yīng)關(guān)閉圖庫(kù)
? shareEl: false, //控制是否顯示分享按鈕
? zoomEl: false, //控制是否顯示放大縮小按鈕
? counterEl: false, //控制是否顯示左上角圖片數(shù)量按鈕
? tapToToggleControls: true, //點(diǎn)擊應(yīng)切換控件的可見(jiàn)性
? clickToCloseNonZoomable: true, //點(diǎn)擊圖片應(yīng)關(guān)閉圖庫(kù)，僅當(dāng)圖像小于視口的大小時(shí)
? indexIndicatorSep: ' / '//圖片數(shù)量的分隔符
}

更多option配置項(xiàng)，見(jiàn)：https://photoswipe.com/documentation/options.html

2、若img標(biāo)簽使用的是異步圖片數(shù)據(jù)，需要在加載數(shù)據(jù)之后，加一句：