Vue.js 项目的 <img> 元素上绑定 onload 和 onerror 事件
近日在Vue.js 项目中，需要实现当 <img> 元素中加载完图片后，将图片做进一步处理的功能；加载 图像的过程中发生了错误时 ，则提示错误。
按照w3school 中的说明，可以在<img> 元素上使用 onload 和 onerror 事件，以 onload 事件为例：
定义和用法
onload 事件会在页面或图像加载完成后立即发生。
语法
onload="SomeJavaScriptCode"
支持该事件的 HTML 标签：
<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>
通过 onload 事件绑定一个函数，图像加载完成后会立即执行此函数。
用法如下：
<!-- in html -->
<img src="xxxxx/xxxx.png" onload="imgLoaded()" onerror="imgLoadErr()" >
// in javascript
...
function imgLoaded() {
// do something
}
function imgLoadErr() {
// do something else
}
onerror 事件的用法与此类似，不再赘述。
但是，在Vue.js 项目中，我们一般会把需要绑定的函数写在 vue 实例的 method 中，这时直接用 onload 和 onerror 去绑定method 中的函数，就会报 Uncaught ReferenceError 的错误。
此时，可以使用@load 和 @error 来绑定method 中的函数。
例如
<!-- in html -->
<img :src="imageSrc" @load="imgLoaded()">
// in script
export default {
methods: {
imgLoaded () {
// do something },
imgLoadErr () {
// do something else }
}
}
这样就可以在图片加载完之后或图片加载出错时，进行对应的处理了。
冀公网安备 13010402001886号