vue项目,在img元素绑定load事件, 获取到的事件对象target为null

最新推荐文章于 2024-06-14 09:48:19 发布
最新推荐文章于 2024-06-14 09:48:19 发布
阅读量2.8k 收藏
点赞数
分类专栏： 踩坑日记 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nhq2018/article/details/123025848
版权
在Vue.js项目中遇到一个问题，当在img元素上绑定load事件时，发现事件触发后获取到的事件对象target为null。经过分析，尽管事件能够正常执行，但预期的target属性并未返回正确的值，这可能会影响代码逻辑。详细场景、问题描述及原因分析将在文章中展开。
摘要由CSDN通过智能技术生成

项目场景：

vue单页面应用

问题描述：

在img元素上绑定load事件, 并传入事件对象, 打印时发现获取到的事件对象中, 包括target在内的部分值为null 
template部分代码
<img
 :src="item.coverImgUrl + '?param=200y200'"
  @load="imgLoaded($event)"
  class="target-image"
  width="200"
  height="200"
/&g
最低0.47元/天 解锁文章
在知识的海洋里奋力狗刨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Image Load Events——图像加载事件
SmileCoffin的博客
07-05 2866
Image sources fire events related to image loading. You can listen for imageloadstart, imageloadend, and imageloaderror type events to monitor image loading progress. This example registers listene
如何判断img加载完成？
zxxxxxxxxxxxz的博客
11-18 3万+
一、load事件 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>img - load event</title> </head> <body> <img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.j.
Vue 中监控img加载完毕事件
yongyafang123的博客
03-31 1万+
使用场景： 当某一个页面中有2个以上的图片，然而有一个事件（比如 截屏）是必须要在页面中的图片都加载完了之后才可以去执行的！否则的话，就不会截到我们想要的屏幕 原理： img的load事件 <img @load=‘loadImg’ src="" /> 做法： 以下是步骤： 1、把页面中的所有图片都加上@load事件； 2、编写事件：（变量加一，判断条件去执行方法） loadImageO...
推荐：Vue.ImagesLoaded——让图片加载监测变得优雅
最新发布
gitblog_00003的博客
06-14 319
推荐：Vue.ImagesLoaded——让图片加载监测变得优雅 项目地址:https://gitcode.com/David-Desmaisons/Vue.ImagesLoaded 一、项目介绍 在Web开发中，动态监控页面内所有图片的加载状态一直是个棘手的问题。这不仅关系到用户体验，还直接影响着网页布局和性能优化。Vue.ImagesLoaded正是一款基于Vue.js 2.x设计的强大插件，...
Vue 中监控 img 加载完毕事件
青颜的天空的博客
03-09 2840
在 Vue 中，可用 @load 方法监控 img 加载完毕事件
关于uniapp中＜image＞标签@load事件不执行的问题
qq_61267719的博客
04-19 2183
uniapp标签@load事件不执行问题
Vue图片预加载
A88552211的博客
05-30 3014
场景：切换下一个组件前，需要预加载图片，同时图片链接有中文，往往有时候缓存匹配问题，中文没匹配上。 上代码： loadImg(list) { console.log('list', list); for(let i = 0; i < list.length; i++) { let img = new Image() let currentSrc = '' img.src = list[i] img.onload = function(e) {
vue.js click点击事件获取当前元素对象的操作
12-28
Vue.js可以传递$event对象 <body id=app> (>点击当前行文本 <li>li2 <li>li3 [removed] new Vue({ el: '#app', data: { message: 'Hello Vue.js!' }, methods: { say: function(msg, event) {...
vue绑定事件后获取绑定事件中的this方法
10-18
在这里，`element`是`$event`的别名，通过`element.currentTarget`我们可以获取到触发事件的元素，而`element.target`则会返回事件最初触发的元素，即使事件经过了事件冒泡。在大多数情况下，`element.currentTarget...
解决vue 绑定对象内点击事件失效问题
12-12
仔细观察才发现，这段代码内的元素都在 vue 绑定对象中。 因此失效。 解决办法是将绑定对象内的元素点击事件换成 v-on:click。 以上这篇解决vue 绑定对象内点击事件失效问题就是小编分享给大家的全部内容了，希望...
vue中img标签图片加载时与加载失败的处理方法
qq_29328065的博客
06-08 6291
开发过程中经常需要和图片处理打交道，看了网上很多有关图片处理的方法，都是讲解得一知半解，没有比较全面的总结。下面，将简单总结一个我们通过vue去处理img标签过程中，图片加载时，与图片加载失败时的处理方法。 1.常见的一个图片的处理流程，当接收到图片时，若图片较大，或者网络较慢的情况，图片还未加载完成，此时需要显示一个正在加载中的图片提示用户图片正在加载中。当图片加载或读取完毕时我们才替换需要显示图片显示到标签上。主要用的是img标签中的onload方法进行处理,代码如下： <!DOCTYPE htm
搞清Image加载事件(onload)、加载状态(complete)后，实现图片的本地预览，并自适应于父元素内(完成)...
weixin_34278190的博客
08-04 1224
onload与complete介绍 complete只是HTMLImageElement对象的一个属性，可以判断图片加载完成，不管图片是不是有缓存；而onload则是这个Image对象的load事件回调，当图片加载完成后执行onload绑定的函数。 给下面一个例子，解释下： document.getElementById('load').onclick = function() { ...
vue中实现图片懒加载的方法（二）
weixin_54145360的博客
11-14 1395
vue图片懒加载为什么组件内部直接写 img 会有卡顿现象？而动态创建的img 标签则很流畅，这是什么原因
Vue之组件 - load
u012632105的博客
01-12 1078
Vue之组件 - load晴天 - 博客园
vue实现图片加载完成前的loading组件
_破败的博客
03-14 2万+
本人新开个人博客，后期所有文章只在博客中更新！         export default {         props: ['src'], // 父组件传过来所需的url         data() {             return {                 url: 'http://www.86y.org/images/loading.gif'
img图片onload事件
weixin_30399055的博客
12-03 965
window.onload事件是在页面dom元素加载完后执行，也就包括了img图片中src加载完成，那么img.onload 就不会执行了。 $("img").each(function () { var src = $(this).attr("src"); $(this).attr("src",""); $(this).get(0).onload = function ...
vue 动态加载图片src的解决办法
热门推荐
Mr_Yan的博客
12-12 7万+
好久没更博了，最近也不知道在忙啥，反正就是感觉挺忙的，在群里看到陆陆续续有刚入vue小伙伴问vue动态加载图片总是404的状况，这篇就简单的说明为什么会出现以及解决办法有哪些。首先先说明下vue-cli的assets和static的两个文件的区别，因为这对你理解后面的解决办法会有所帮助　assets:在项目编译的过程中会被webpack处理解析为模块依赖，只支持相对路径的形式，如< img src
image的加载事件(onload)和加载状态(complete)
苍穹之上倚天长鸣的博客
04-01 2690
之前做过这样一个需求，要让商家页的商家图片按照图片外面box的大小等比例缩放。之前的想法是在页面中先输出图片的src，然后在页面底部初始化js，然后在js中写相应的可以使图片按照box的大小等比例缩放的函数。要实现图片的等比例缩放要做到以下几点， 第一，得到图片的width和height 第二，比较图片的width和height与box的width的height的大小，共有四种情况，
浅谈cv2.imread()和keras.preprocessing中的image.load_img()区别
菜鸟教程
06-16 1249
浅谈cv2.imread()和keras.preprocessing中的image.load_img()区别更多python视频教程请到菜鸟教程https://www.piaodoo.com/ 1、image.load_img() from keras.preprocessing import image img_keras = image.load_img(’./original/dog/880.jpg’) print(img_keras) img_keras = image.img_to_
vue事件委托 子元素中嵌套了其他元素 获取绑定点击事件的节点
04-29
如果你想在 Vue 中使用事件委托，可以使用 `@click` 来绑定点击事件。当子元素中嵌套了其他元素时，可以使用事件对象的 `target` 属性来获取绑定点击事件的节点。 例如，你可以这样绑定点击事件： ```html <template> <div @click="handleClick"> <div> <button>Click me</button> </div> </div> </template> ``` 在 `handleClick` 方法中，你可以通过事件对象的 `target` 属性来获取点击的节点： ```js methods: { handleClick(event) { // 获取绑定点击事件的节点 const target = event.target; // 判断点击的节点是否为 button 元素 if (target.tagName === 'BUTTON') { console.log('Button clicked!'); } } } ``` 这样就可以判断点击的节点是否为 button 元素，从而执行相应的操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值