vue-picture-preview

最新推荐文章于 2024-08-15 10:00:18 发布

咸鱼与梦想

最新推荐文章于 2024-08-15 10:00:18 发布

阅读量1.2k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/angle_lzc/article/details/84383055

版权

vue 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

npm地址

//第一步vue使用
import vuePicturePreview from 'vue-picture-preview'
Vue.use(vuePicturePreview)

<!-- Vue root compoment template -->
<div id="app">
    <router-view></router-view>
//第二步使用vue-picture-preview的lg-preview组件
    <lg-preview></lg-preview>
</div>

//第三步使用v-preview指令
<img  v-preview="img.url" :src="img.url">

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

咸鱼与梦想

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

pc 图片预览放大端vue_vue-preview vue图片预览插件+缩略图样式

weixin_39760650的博客

12-20

670

一、安装npm i vue-preview -S二、main.js中导入组件//vue-preview 开始import VuePreview from 'vue-preview';// defalut installVue.use(VuePreview)//vue-preview 结束三、代码1、要为缩略图设定样式，要在全局样式中设定，如下：/*图片预览缩略图*/.preview fig...

ImagePreview

03-29

使用Swift实现分屏滑动查看图片

2 条评论您还未登录，请先登录后发表或查看评论

vue-photo-preview.zip

05-27

基于vue的图片点击放大插件：vue-photo-preview，可全屏、左右滑动切换，适用于移动端和PC端，下载即用

vue vue-picture-preview 图片预览插件

yuenandehutu的博客

02-22

2万+

1. 安装依赖： npm install vue-picture-preview --save 2. .vue文件中引用： import vuePicturePreview from 'vue-picture-preview' Vue.use(vuePicturePreview) 3. .html文件中router-view标签后引入: <lg-pr...

Vue Picture Preview 项目教程

gitblog_01071的博客

08-15

691

Vue Picture Preview 项目教程 vue-picture-preview移动端、PC 端 Vue.js 图片预览插件 | Friendly picture file preview Vue.js plugin based on PhotoSwipe.项目地址:https://gitcode.com/gh_mirrors/vue/vue-picture-preview 1. 项目的...

vue中使用vue-picture-preview 图片查看器

weixin_42439024的博客

12-05

7822

在vue 中引入vue-picture-preview 实现图片点击查看的图片本想贴在这里插入图片描述视频来，找来找去没看到怎么贴视频，囧~ 现在贴图吧页面整体的样式图点击第一章张图片的效果点击第二图片时的效果贴完发现图片有点大，懒得去处理了，还有用到的美图来源见水印，废话不说上代码 1.安装依赖 cnpm install --save-picture-preview 2.在main....

gitblog_00029的博客

05-29

463

gitblog_00018的博客

05-29

777

vue-picture-preview:移动端、PC 端 Vue.js 图片预览插件 | Friendly picture file preview Vue.js plugin based on PhotoSwipe

05-17

vue-picture-preview 移动端、PC 端 Vue.js 图片预览插件 | Friendly picture file preview Vue.js plugin based on PhotoSwipe. 安装 npm install --save vue-picture-preview 使用入口文件中全局引入 import Vue ...

解决vue-photo-preview 异步图片放大失效的问题

10-15

此外，如果你的项目使用的是`vue-cli`，你可能需要安装`vue-picture-preview`这个组件，它提供了更丰富的图片预览功能。安装命令如下： ```bash npm install --save vue-picture-preview # 或者使用 cnpm 安装 ``` ...

vue-img-preview vue 2中的图像输入预览组件-Vue.js开发

05-27

看起来像这样（没有表单）安装npm install vue-img-preview --save从'vue'导入import Vue从'vue-img-preview'导入{vueImgPreview} Vue.component（'vue-img-preview'， vueImgPreview）浏览器使用情况

三种图片预览插件viewer、vue-photo-preview、vue-picture-preview

weixin_54397440的博客

03-01

2191

preview图片预览插件data () {return {imgs: [title: '图片1',},title: '图片2',},

vue全家桶开发管理后台—图片预览功能（vue-picture-preview）

麻球科技

03-21

1万+

安装：cnpm install --save-picture-preview使用：首先在项目的入口文件中引入, 调用 Vue.use 安装。main.js:import vuePicturePreview from 'vue-picture-preview' Vue.use(vuePicturePreview)在根组件添加 lg-preview 组件的位置App.vue:<template&...

探秘Vue.js图片预览神器：vue-picture-preview

热门推荐

Wcharles666的博客

08-01

3万+

使用方法安装 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属性 p...

Vue：图片预览vue-photo-preview的使用

kukukumua

06-30

1200

vue-photo-preview 应用场景点击图片，能够以类似朋友圈的方式展示图片，主要功能：预览，放大。选择经过网上一番查阅，有三款插件比较不错，分别是 viewerjs、vue-photo-preview 以及 vue-picture-preview。经过简单比较，viewerjs 功能比较强大，更适合web端。vue-picture-preview 只有预览和切换上下张功能，无法满足全部需求。故优先选择vue-photo-preview。使用 1、安装 npm install vue-pho

vue结合element-ui如何实现图片预览

04-25

您好，关于您的问题，可以通过以下步骤实现图片预览： 1. 首先，需要安装并引入 element-ui 组件库和 vue-preview 插件。 2. 在需要实现图片预览的页面中，使用 <el-upload> 组件上传图片，并设置相关属性，如 action、before-upload、list-type 等。 3. 在 <el-upload> 组件的 slot 属性中添加自定义内容，这里可以使用 vue-preview 插件来实现图片预览。具体实现方法如下： ``` <el-upload action="your_upload_url" :before-upload="checkImage" list-type="picture-card"> <i slot="default" class="el-icon-plus"></i> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> // 添加自定义内容 <vue-preview :slides="slides"></vue-preview> </el-upload> ``` 4. 在 data 中定义 slides 数组，并在 checkImage 方法中动态生成 slides 数组的内容，用于传递给 vue-preview 组件进行图片预览。具体实现方法如下： ``` data() { return { slides: [] } }, methods: { checkImage(file) { const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'; const isLt2M = file.size / 1024 / 1024 < 2; if (!isJPG || !isLt2M) { this.$message.error('上传图片只能是 JPG/PNG 格式，且不超过 2MB'); return false; } // 生成 slides 数组，并使用 vue-preview 进行图片预览 const reader = new FileReader(); reader.readAsDataURL(file.raw); reader.onload = () => { this.slides.push({ src: reader.result }); this.$nextTick(() => { this.$refs.preview.open(); }); }; } } ``` 以上就是使用 vue 结合 element-ui 实现图片预览的方法了，希望能对您有所帮助。