在vue中如何实现图片loading组件

来源：动视网责编：小OO 时间：2020-11-27 19:39:41

在vue中如何实现图片loading组件

如下所示。<；template>；<；img ：src="；url"；>；<；/template>；<；script>；export default { props： ['；src'；].// 父组件传过来所需的url data() { return { url： '；http：//www.86y.org/images/loading.gif'；// 先加载loading.gif } }.mounted() { var newImg = new Image() newImg.src = this.src newImg.onerror = () =>；} newImg.onload = () =>。

推荐度：

点击下载本文 文档为doc格式

导读如下所示。<；template>；<；img ：src="；url"；>；<；/template>；<；script>；export default { props： ['；src'；].// 父组件传过来所需的url data() { return { url： '；http：//www.86y.org/images/loading.gif'；// 先加载loading.gif } }.mounted() { var newImg = new Image() newImg.src = this.src newImg.onerror = () =>；} newImg.onload = () =>。

下面我就为大家分享一篇vue实现图片加载完成前的loading组件，具有很好的参考价值，希望对大家有所帮助。

如下所示：

<template>
 <img :src="url">
</template>
<script>
 export default {
 props: ['src'], // 父组件传过来所需的url
 data() {
 return {
 url: 'http://www.86y.org/images/loading.gif' // 先加载loading.gif
 }
 },
 mounted() {
 var newImg = new Image()
 newImg.src = this.src
 newImg.onerror = () => { // 图片加载错误时的替换图片
 newImg.src = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=14486509807&di=22213343ba71ad36b561b5df999ff7&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F77%2F31%2F20300542906611142174319458811.jpg'
 }
 newImg.onload = () => { // 图片加载成功后把地址给原来的img
 this.url = newImg.src
 }
 }
 }
</script>

以下为纯js代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>loading</title>
</head>
<body>
 <img id="img">
 <script>
 window.onload = () => {
 var img = document.querySelector('#img');
 img.src = 'http://www.86y.org/images/loading.gif'; // 先加载loading.gif
 var newImg = new Image();
 newImg.src = 'https://avatars3.githubusercontent.com/u/1?v=3';
 newImg.onerror = () => { // 图片加载错误时的替换图片
 newImg.src = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=14486509807&di=22213343ba71ad36b561b5df999ff7&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F77%2F31%2F20300542906611142174319458811.jpg';
 }
 newImg.onload = () => { // 图片加载成功后把地址给原来的img
 img.src = newImg.src
 }
 }
 </script>
</body>
</html>

上面是我整理给大家的，希望今后会对大家有帮助。

如何实现ajax前台后台跨域请求

自定义ajax支持跨域组件（详细教程）

通过微信小程序如何实现验证码获取倒计时效果