使用Vue获取img currentSrc

的意思是获取img标签中当前显示的图片的URL。

在Vue中，可以通过以下步骤来获取img currentSrc：

首先，在Vue组件中，使用ref属性给img标签添加一个引用名称，例如ref="myImage"。
在Vue组件的mounted生命周期钩子函数中，可以通过this.$refs来访问引用的DOM元素。
使用this.$refs.myImage.currentSrc即可获取img标签当前显示的图片的URL。

这样，你就可以在Vue中获取到img currentSrc了。

关于Vue的更多信息和使用方法，你可以参考腾讯云的Vue.js产品介绍页面：Vue.js产品介绍

请注意，以上答案仅供参考，具体实现方式可能因项目需求和代码结构而有所不同。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Vue 图片预加载

为了解决这一问题，可以使用预加载的方式，在页面打开之前，提前将其所需的资源加载到浏览器缓存。...在Vue中，可以将预加载的操作放在合适的生命周期钩子函数内，比如在前一个组件挂载后就加载后一个组件所需的资源。以下是Vue3组合式api写法。...= new Image() let currentSrc = '' img.src = imgList[i] img.onload = function...= this.currentSrc img.src = currentSrc console.log('二次缓存'); }...console.log('加载完毕', e, this.currentSrc); } img.onerror = function (e) { console.log

2.5K3 0

Vue上传图片裁剪预览插件vue-img-cutter的使用

话不多说，首先附上项目地址： Github链接：https://github.com/acccccccb/vue-img-cutter 是不是莫名的眼熟，是不是在几年前还用着jquery的时候在插件库里面看到过...兼容性也是挺好的哟，兼容IE9+,MSEdge,chrome,firefox等主流浏览器，还可以使用此配置工具进行更多个性化设置，不仅能实时预览，还可直接生成代码复制粘贴到你的项目。...1:在自己的项目里面安装上传图片裁剪预览插件vue-img-cutter npm install vue-img-cutter --save-dev ?...安装完成之后可以看到package.json里面的关于插件vue-img-cutter版本信息 ?...2：新建一个index.vue的组件，将ImgCutter.vue文件引入项目： import ImgCutter from 'vue-img-cutter' export default {

2.5K2 0

img标签随机获取高质量图片

, 于是写一个静态页面, 贴了几个超链接后来, 感觉不美观, 就放了几张图片服务器存储的图片看了几遍就看腻了, 于是找了一个高质量图片的api, 每次打开导航页都能看到随机的封面开源图片api的使用...book,library 将随机图片嵌入到html中 img src="https://source.unsplash.com/300x300/?...div> img...资源分享(建设中) 小结: 使用随机化开源图片封面...对于刚刚接触前端的小伙伴, 使用开源的图片库, 能让你的页面更加丰富多彩, 提升学习的兴趣. 对于前端老司机,可以获取定制化的开源图片, 提升页面展示效果.

2.2K1 0

【Linux系列】＞ img.sh 使用

> img.sh，这条命令会将字符串"Hello, World!"写入文件img.sh中。...如果img.sh文件之前存在，它的内容会被完全替换；如果不存在，系统会创建一个新的空文件，并写入指定的字符串。 > img.sh命令的用途现在我们回到最初的问题，> img.sh命令的作用是什么？...使用> img.sh可以快速创建一个空的img.sh文件。重置文件内容：如果img.sh文件中的内容不再需要，或者我们希望从头开始编辑，使用> img.sh可以快速清空文件，为新的编辑做好准备。...> img.sh命令提供了一种快速且可靠的方法来实现这一点。数据备份：在进行数据备份时，我们可能需要创建一个空文件作为备份的起点。> img.sh命令可以帮助我们快速完成这一任务。...例如，echo "New line" >> img.sh会在img.sh文件末尾添加一行文本，而不是覆盖原有内容。 2>：错误重定向。它将标准错误（stderr）重定向到指定的文件。

931 0

vue react img标签引入图片的几种方式

/images/photo.png'; img src={imgURL } /> img src={require('./...../images/photo.png')} /> React src里面引入图片的几种方式es6不支持在img />标签内直接写图片的路径，即img src="...../images/photo.png”/> 以下是错误的 image.png 正确引入方法 image.png vue import imgURL from './...../images/photo.png'; img :src="imgURL" /> img :src="require('./...../images/photo.png')" /> 使用动态路径import、require 首先讲讲这两个兄弟，在ES6之前，JS一直没有自己的模块语法，为了解决这种尴尬就有了require.js，在ES6

1.9K2 0

Vue某些情况下 v-model绑定数据不实时更新解决办法

受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。...因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。...M ，将 s h o w V i d e o 变为 t r u e 的方法放在 t h i s . nextTick() 一开始，用v-if将video元素隐藏，当src值改变的时候，为获取更新后的...DOM，将showVideo变为true的方法放在this.nextTick()一开始，用v−if将video元素隐藏，当src值改变的时候，为获取更新后的DOM，将showVideo变为true的方法放在...this.nextTick()中，触发浏览器的重排，可以使浏览器重新读取source元素的src值，重新获取视频资源。

6.1K4 1

Vue 使用 jsx 设置及获取 slot

// 具名插槽 footer: slotProps => [ ] } } 子组件获取

4.4K2 0

Vue图片优化指南啦：v-img 介绍

你是否在项目中拿到UI切的图片就用，使用 img 元素能显示就行，等项目上线了，才发现图片体积过大、刚打开首屏就发送了几十个图片请求，这时才想到对图片进行压缩、使用懒加载？...现在，使用 vue 技术栈的同学有福利啦。大家不需要再重复上述操作了，使用 v-img 组件，就可以解决上述烦恼。...使用方法安装插件 // 默认全局配置 Vue.use(VueImg) // 自定义全局配置 Vue.use(VueImg, { loading: '', error: '', prefix...`ali` 和 `qiniu`，默认为 'qiniu' }) 使用指令基本用法由于 Vue 2 删除了指令中的 params，故采用 object value 的形式传入参数 <!...://segmentfault.com/a/1190000021421981#item-5 https://www.npmjs.com/package/vue-img

9252 0

js和jQuery获取img标签的src属性获取不到的解决方法

很多朋友可能遇到过，用 jQuery 获取 img 标签的 src 属性却获取不到的问题： img id="test" src="1.jpg" alt="test" /> 使用如下的语句都会出错：...alert($('#test')); alert($('#test').src); 使用 $('#test').src 语句不会出错，但获取不到 img 的地址。...alert($('#test')); //[object Object] alert($('#test').src); //undefined 最后，使用 $('#test')[0].src 才能够获取到...拓展： JS获取 img 的 src 值： //方法一： var path = $('#test').attr('src'); //方法二： var path = document.getElementById...("test").src; //方法三： var path = $("#test")[0].src; 声明：本文由w3h5原创，转载请注明出处：《js和jQuery获取img标签的src属性获取不到的解决方法

18.9K6 0

vue中使用scss动态获取js变量

需求： image.png 数据： list: [ { title: "Ⅰ级风险", color: "#ff3333", }, {...

6.4K0 0

vue中使用scss动态获取JS变量

vue中使用scss动态获取JS变量需求： image.png 数据： list: [ { title: "Ⅰ级风险", color: "#ff3333", }, {

5K1 0

使用 qemu-img 转换镜像格式

qemu-img镜像格式转换工具支持vhd、vmdk、qcow2、raw、vhdx、qcow、vdi或qed社区格式的镜像的相互转换。...# 转换 vmdk 格式为 qcow2 格式 $ qemu-img convert -p -f vmdk -O qcow2 centos6.9.vmdk centos6.9.qcow2 # 转换 vma...(raw) 为 qcow2 $ qemu-img convert -p -f raw -O qcow2 vzdump-qemu-125-2022_08_16-13_40_42.vma vzdump-qemu...参考文献# 通过qemu-img工具转换镜像格式 By Huawei Cloud Converting between image formats By OpenStack 注：本作品采用知识共享署名...-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。

1.9K2 0

Vue成员获取

0828自我总结 Vue成员获取一.vue中data的获取 1.获取data里面的某个变量 $data.msg也可以简写成msg 2.获取data全部内容 $data 二.获取vue中vue挂钩的对象...$el 三.获取除data以外的属性 $options.Vue中的属性名称(如arr等等)

5712 0

图片渐进式加载优化实践指南

Next，所以有些示例代码是 React）（1）使用图片主色调（2）使用某个颜色（3）使用图片的缩略图（4）使用模糊 + 压缩图片（5）图片占位符方案 1：使用图片主色调在日常开发中，我们的图片 src...显示小图并加载 var img = new Image(); img.src = small.src; img.onload = function () {...', width, height, layout = 'responsive', className = '', style = {}}) => { const [currentSrc...&& currentSrc.startsWith('blob:')) { URL.revokeObjectURL(currentSrc); }...&& img src={currentSrc} alt={alt} style={getImageStyle()} />} );};// 使用<ProgressiveImage

831 0

VUE 组件的计算属性

前言今天也是元气满满的一天，今天整理一下VUE组件的计算属性！...可以在控制台使用vm.message="HelloShit!".../vue.js"> const musicData = [{ id: 1, name...，既然使用methods就可以实现，那为什么还需要计算机属性呢？...总结：使用计算机属性还是methods取决于你是否需要缓存，当遍历大数组和做大量计算时，应当使用计算机属性，除非你不希望得到缓存。

1K2 0

H5电影电视前端界面完整代码分享

/js/vue.js"> (function (doc, win) { var docEl = doc.documentElement...> var app = new Vue...// 加载默认视频 this.videoId = this.tvInfos.currentSrc.num // 加载默认视频 }, methods...endFn() { console.log(21312) }, getUrlParam(name) { // 获取地址栏参数...// 加载默认视频 this.videoId = this.tvInfos.currentSrc.num // 加载默认视频 setTimeout

6622 0

vue使用腾讯位置服务获取当前位置

[9a88acabab824818ad336b2c59a3edee~tplv-k3u1fbpfcp-watermark.image] 实现本文使用的是方法一（通过iframe内嵌调用）：参照文档写的例子来用就行...console/user/info 开发者验证之前： [6dedef69fa3343029acdf733be30fd17~tplv-k3u1fbpfcp-watermark.image] 开发者验证之后： key获取地址

3.4K4 1

vue使用watch 观察路由变化，重新获取内容

= -1) { //路由变化后重新获取帖子列表 this.

6125 0

vue使用watch 观察路由变化，重新获取内容

在用Vue开发的过程中总会遇到这样或者那样的坑。...vue的路由发生变化分两种情况，一种是pathname变化（或是hash变化），第二种是参数变化，第一种发生变化时，组件会重新加载，各个生命周期都会执行。

2.8K5 0

Vue---从后台获取数据vue-resource的使用方法

作为前端人员，在开发过程中，我们大多数情况都需要从后台请求数据，那么在vue中怎样从后台获取数据呢？接下来，我简单介绍一下vue-resource的使用方法，希望对大家有帮助。...一、下载vue-resource 　　1、npm install vue-resource --save -dev 　　2、github: https://github.com/pagekit/vue-resource...二、引入文件　　引入vue.js和vue-resource.js，注意先后顺序，先引vue.js。记住所有vue插件都需要在vue.js之后加载。 ?...三、使用　　我今天写了一个小demo，比较简单。 1.HTML 1 <!...，类似于jQuery的beforeSend函数 progress function(event) ProgressEvent回调处理函数 credentials boolean 表示跨域请求时是否需要使用凭证

3.4K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

使用Vue获取img currentSrc

相关·内容

Vue 图片预加载

Vue上传图片裁剪预览插件vue-img-cutter的使用

img标签随机获取高质量图片

【Linux系列】＞ img.sh 使用

vue react img标签引入图片的几种方式

Vue某些情况下 v-model绑定数据不实时更新解决办法

Vue 使用 jsx 设置及获取 slot

Vue图片优化指南啦：v-img 介绍

js和jQuery获取img标签的src属性获取不到的解决方法

vue中使用scss动态获取js变量

vue中使用scss动态获取JS变量

使用 qemu-img 转换镜像格式

Vue成员获取

图片渐进式加载优化实践指南

VUE 组件的计算属性

H5电影电视前端界面完整代码分享

vue使用腾讯位置服务获取当前位置

vue使用watch 观察路由变化，重新获取内容

vue使用watch 观察路由变化，重新获取内容

Vue---从后台获取数据vue-resource的使用方法

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐