So implementieren Sie die Bildladekomponente in Vue-js-Tutorial-php.cn

So implementieren Sie die Bildladekomponente in Vue

亚连

Freigeben： 2018-06-07 16:45:57

Original

2114 Leute haben es durchsucht

Im Folgenden werde ich einen Artikel über die Ladekomponente von Vue mit Ihnen teilen, bevor das Laden des Bildes abgeschlossen ist. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich ist.

lautet wie folgt:

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

Nach dem Login kopieren

Das Folgende ist reiner JS-Code

<!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(&#39;#img&#39;);
   img.src = &#39;http://www.86y.org/images/loading.gif&#39;; // 先加载loading.gif
   var newImg = new Image();
   newImg.src = &#39;https://avatars3.githubusercontent.com/u/1?v=3&#39;;
   newImg.onerror = () => { // 图片加载错误时的替换图片
    newImg.src = &#39;https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489486509807&di=22213343ba71ad6436b561b5df999ff7&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F77%2F31%2F20300542906611142174319458811.jpg&#39;;
   }
   newImg.onload = () => { // 图片加载成功后把地址给原来的img
    img.src = newImg.src
   }
  }
 </script>
</body>
</html>

Nach dem Login kopieren

Das Obige habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

So implementieren Sie domänenübergreifende Ajax-Front-End- und Back-End-Anfragen

Benutzerdefiniertes Ajax unterstützt Cross- Domänenkomponenten (ausführliches Tutorial)

So implementieren Sie einen Bestätigungscode, um einen Countdown-Effekt über das WeChat-Applet zu erhalten

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Bildladekomponente in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!