vue 图片预览组件

阳光穿透心脏的1/2处 2022-05-24 13:45 559阅读 0赞

#

vue-photo-preview

转自 https://npm.taobao.org/package/vue-photo-preview

# 安装 npm install vue-photo-preview --save
# 引入 import preview from 'vue-photo-preview' import 'vue-photo-preview/dist/skin.css' Vue.use(preview)
# html //在img标签添加preview属性 preview值相同即表示为同一组 <img src="xxx.jpg" preview="0" preview-text="描述文字"> //分组 <img src="xxx.jpg" preview="1" preview-text="描述文字"> <img src="xxx.jpg" preview="1" preview-text="描述文字"> <img src="xxx.jpg" preview="2" preview-text="描述文字"> <img src="xxx.jpg" preview="2" preview-text="描述文字">
# 2018-05-17 更新 //如果图片是异步生成的，在图片数据更新后调用： this.$previewRefresh()

网上找了好几个组件

如： vue-picture-preview 等等，，，但在一些低版本的浏览器上都报错

Use of const in strict mode

可能是 webpack、vue等等版本太高还是什么的，，，最后找到这个可以用

发表评论取消回复

表情：

评论列表（有 0 条评论，559人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue+elementui实现图片预览，放大图片

背景：后台系统用到图片预览功能。 > 页面<template> <div> <span @click="clickImg(index)

约定不等于承诺〃/ 2023年07月20日 05:36/ 0 赞/ 98 阅读

相关 vue图片预览

vue结合vant实现图片视频预览 1. 给图片或视频添加点击事件 <div class="comment_image_box_list" v-for="(im

蔚落/ 2023年07月18日 02:48/ 0 赞/ 70 阅读

相关强推#vue图片预览组件—v-viewer

强推\vue图片预览组件—v-viewer 先来介绍一下背景项目是用vue搭的，产品给的需求是：图片列表展示，要求点击图片可以放大。原本就是写了一个弹出框，包裹相

忘是亡心i/ 2023年02月22日 05:21/ 0 赞/ 54 阅读

相关 vue项目elementUI预览图片

vue项目elementUI预览图片说明： 1，elementUI组件中已经实现了图片预览，点击图片会有预览的功能 2，根据产品需求，要不展示图片，点击“图片预览

我不是女神ヾ/ 2022年12月28日 07:16/ 0 赞/ 828 阅读

相关 Vue项目中使用Vant的“ImagePreview 图片预览”组件

html示例代码： <img :src="imageUrl" alt="" @click="getImg()"> js示例代码： import { Im

小咪咪/ 2022年08月29日 00:10/ 0 赞/ 496 阅读

相关图片预览

插件：uploadPreview.min.js <tr> <th>商品图片</th>

Love The Way You Lie/ 2022年07月11日 05:40/ 0 赞/ 598 阅读

相关 vue 手机预览图片功能

![20180420155824912][] 安装 NPM npm install --save vue-picture-preview 使

梦里梦外;/ 2022年05月25日 22:50/ 0 赞/ 589 阅读

相关 vue 图片预览组件

vue-photo-preview 转自 https://npm.taobao.org/package/vue-photo-preview 安

阳光穿透心脏的1/2处/ 2022年05月24日 13:45/ 0 赞/ 560 阅读

相关 Vue图片上传预览

Vue图片上传预览想要的效果 ![zUO9bbB.png][] 代码实现页面核心代码 <h3

骑猪看日落/ 2022年05月08日 09:24/ 0 赞/ 650 阅读

相关图片预览

定制上传按钮： ![ExpandedBlockStart.gif][] ![复制代码][copycode.gif] <div

「爱情、让人受尽委屈。」/ 2021年12月22日 09:21/ 0 赞/ 820 阅读