需求:当页面需要处理图片渲染完毕的时候,对图片进行加水印操作。
想到了image
的onload
事件,当图片加载完成之后再处理图片。
原生js
<img onload="get(this)" src="..." style="display: none"/>
<script type="text/javascript">
function get(ts){
ts.style.display = 'block'
}
</script>
vue
div(:class="$style.main", v-show="show")
img(:src="datas.image", @load="loadImage")
data() {
return {
show: false,
}
},
methods:{
loadImage(){
let _this = this
_this.show = true
}
}
在图片加载完成之后再处理图片,就可以解决元素无法找到的问题,问题解决。