Vue：点击图片在新的页面打开

于 2024-10-10 09:11:15 发布
阅读量370 收藏
点赞数 1
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jhgfvjfggff_fds_f/article/details/142812223
版权

HTML页面

<img slot="reference" :src="tpUrl" width="50px" height="50px" @click="openImage(tpUrl)">

JS语法

/**
 * 点击图片 在新的页面打开
 */
openImage(url){
  window.open(url, "_blank");
}
Monly21
关注
专栏目录
图片预览新窗口全屏图片展示功能
05-27
可做图片预览跟淘宝图片预览功能一样，新窗口全屏图片展示功能
VUE 点击图片直接进行页面跳转
prospect_的博客
07-26 8150
最简单的就是设定一个@click，给它一个名字，在script中进行方法定义，但这个跳转直接改变了url，只有父组件中保存的内容才会保留，比如提前设定的header。
vue3+vite项目：window.open打开新窗口查看图片
个人博客
12-15 2272
写入html字符串
vue新窗口打开
兔子零
07-30 804
方法1: const { href } = this.$router.resolve({ name: "ArticleDetail", params: { id: 0 } }); window.open(href, '_blank'); //window.open(href, '_blank', 'toolbar=yes, width=900, height=700') 方法2:...
vue访问图片
weixin_45630345的博客
08-19 3181
首先说明一下我的图片所放位置，接下来用三种方式访问图片： 第一种方式：static static静态资源文件访问，原样输出，不参与打包; 在打包结束后若路径出现问题，找到config中的index.js，进入后将bulid中的assetsPublicPath：’/‘改为assetsPublicPath：’./’，再重新打包。 <img :class="img1" src="../../static/3.jpg" alt=""> <img :class="img1" src="../.
vue实现点击图片查看图片
weixin_52630329的博客
08-18 1137
1. 使用vue一个组件 vue-directive-image-previewer 安装依赖项 npm install vue-directive-image-previewer -D 2. 在main.js全局导入使用 import VueDirectiveImagePreviewer from 'vue-directive-image-previewer' import 'vue-directive-image-previewer/dist/assets/style.css'...
vue点击按钮上传图片_基于VUE选择上传图片并在页面显示（图片可删除）
weixin_39897127的博客
12-19 1713
/*** 从 file 域获取 本地图片 url*/function getFileUrl(obj) {let url;url = window.URL.createObjectURL(obj.files.item(0));return url;}export default {name: 'accident',// 定义数据data () {return {imgNum:4, //上传的照...
vue实现点击按钮下载文件功能
10-16
为了实现下载功能，需要在`<el-link>`组件上设置`target="_blank"`属性，使得点击时在新窗口打开，而`download`属性则用来设置下载文件时使用的默认文件名。由于Vue模板中不能直接使用`download`属性，通常需要结合...
vue.js图片点击显示
weixin_70013544的博客
03-21 934
vue.js图片点击显示
vue页面导出Word文档（含图片）
热门推荐
日常笔记/总结/系列知识梳理
08-26 1万+
Vue.js 是一个渐进式 JavaScript 框架，用于构建用户界面。与其他庞大的框架不同，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，也便于与第三方库或已有项目整合。另一方面，当与现代化的工具和库结合使用时，Vue 也完全能够构建复杂单页应用。组件系统：Vue.js 使用组件系统来构建应用。组件是可复用的 Vue 实例，具有自己的作用域，可以包含模板、数据、样式等。响应式数据绑定：Vue 会自动跟踪依赖关系并在数据变化时更新视图。
vue点击按钮预览图片，pdf，文件
LW0512的博客
11-19 3404
vue点击图片，pdf，文件，预览 <div style="width: 50%; display: inline-block; vertical-align: bottom"> <div class="tit-top">上传图片</div> <div style="min-height: 151px"> <div style="display:
vue点击按钮怎么跳转图片_vue页面跳转
weixin_36001279的博客
01-30 1867
一、在template中的常见写法：点击跳转二、在js中设置跳转(在方法中跳转界面并传参，两种方式：params 与 query)：有时候我们需要的是点击按钮跳出弹窗，选择判断后进行跳转，我们常用.$router.push 跳转 传参：跳转//jsexport default{methods:{func (){this.$router.push({name: '/order/page1',para...
vue点击按钮怎么跳转图片_vue下的h5页面实现点击图片跳转小程序
weixin_26985923的博客
01-12 1549
第一步：配置签名和申明openTagListthat.$api.getShareParam(params).then(data => {wx.config({debug: false,appId: 'wxea734e16e936474c', // 和获取Ticke的必须一样------必填，公众号的唯一标识timestamp: data.timestamp, // 必填，生成签名的时间戳no...
Vue：基于点击事件的图片弹出和页面跳转的实现
qq_41286666的博客
07-26 3484
Vue：基于点击事件的图片弹出和页面跳转的实现。
vue 实现点击跳转页面
qq_33240556的博客
07-11 2614
在Vue中实现点击跳转页面，通常有两种常见的方式：使用组件和编程式导航。下面分别介绍这两种方法。
Vue中使用v-viewer，打开图片指定显示某一张图片
qq_46491723的博客
04-13 1718
在vue中使用v-viewer，点击图片后默认会显示第一张图片，通过。
vue 图片查看
qq_41144591的博客
04-22 2294
vue查看图片
vue中如何用a标签打开本地图片
haishangfeie的博客
11-16 7202
vue中如何用a标签打开本地图片vue中如何用a标签打开本地图片扯点废话最后 vue中如何用a标签打开本地图片 不知道各位有没有遇到希望在vue中点击一下a标签就打开本地图片这种情况。话说，会看到这篇博客的话应该是遇到了才对吧。 可以这样写： &amp;lt;a :href=&quot;require('../../img/test.jpg')&quot; target=&quot;_blank&quot;&amp;gt;te...
vue如何实现点击存在D:/路径下的图片跳转网页
最新发布
09-10
在Vue中实现点击图片跳转到指定网页的功能，通常可以通过以下步骤完成： 1. 在Vue模板中，为图片元素添加一个点击事件监听器。这可以通过`v-on`或简写为`@`来实现。 2. 在Vue的组件方法中定义事件处理函数。在这个函数中，可以使用JavaScript的`window.open()`方法来打开一个新的浏览器窗口或标签页，从而跳转到指定的网址。 3. 在事件处理函数中，可以将图片路径作为参数传递给`window.open()`方法，从而实现点击图片跳转到指定网页的功能。 下面是一个简单的示例代码： ```html <template> <div> <!-- 为图片添加点击事件 --> <img src="D:/path/to/image.jpg" alt="图片" @click="handleImageClick('D:/path/to/your-url.html')"> </div> </template> <script> export default { methods: { // 定义事件处理函数 handleImageClick(url) { // 打开新的网页 window.open(url); } } } </script> ``` 在这个示例中，当用户点击图片时，会触发`handleImageClick`方法，并将指定的URL作为参数传入。然后，`window.open()`会在新窗口或新标签页中打开传入的URL地址。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Monly21

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值