vue-photo-preview image preview invalid
<img
class="pic"
v-for="(item,index) of imgList"
:key="index"
:src=""
:large=""
preview="0"
preview-text="Symptom Picture"
>
imgList is to call this.$previewRefresh() after obtaining data asynchronously, and refresh and reset it, otherwise ~~ will not take effect
Image preview usage of vue-photo-preview
Application scenarios
Click on the picture to display the picture in a similar way to the circle of friends. The main functions are: preview and enlarge.
choose
After some online search, there are three plug-ins that are pretty good, namely viewerjs, vue-photo-preview and vue-picture-preview. After a simple comparison, viewerjs has a relatively powerful function and is more suitable for the web side. vue-picture-preview Only preview and switching up and down functions cannot meet all needs. Therefore, vue-photo-preview is preferred.
use
1. Installation
npm install vue-photo-preview --save
2. Registration and configuration
import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/'
let options = {
fullscreenEl: false,
}
(preview, options)
(preview)3. Use
<img src="" large="xxx_2x.jpg" preview="1" preview-text="describe">
The preview value is the same as the same group of pictures. preview-text is the description text below when previewing. The src of img is a thumbnail by default. If you do not fill in large, src will be displayed. If there is large, a large image will be displayed.
Notice
1. The above is simple to use, and option actually has more configurable items, such as:
let options = {
fullscreenEl: false, //Controll whether to display the full screen button in the upper right corner closeEl: false, //Controll whether to display the close button in the upper right corner tapToClose: true, //Click on the sliding area to close the gallery shareEl: false, //Controll whether to display the share button zoomEl: false, //Controll whether to display the zoom-in button counterEl: false, //Controll whether to display the number of pictures in the upper left corner button tapToToggleControls: true, //Click to switch the visibility of the control clickToCloseNonZoomable: true, //Click on the image to close the gallery only if the image is smaller than the viewport size indexIndicatorSep: ' / '//The separator of the number of pictures}For more option configuration items, see:/documentation/
2. If the img tag uses asynchronous image data, you need to add a sentence after loading the data:
this.$previewRefresh();
After refreshing this way, the vue-photo-preview preview effect will take effect.
The above is personal experience. I hope you can give you a reference and I hope you can support me more.