suchen

Heim >Web-Frontend >js-Tutorial >So implementieren Sie die Bildladekomponente in Vue

So implementieren Sie die Bildladekomponente in Vue

亚连
亚连Original
2018-06-07 16:45:572133Durchsuche

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>

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>

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So verwenden Sie Javascript, um für jeden Tag innerhalb eines Datumsbereichs unterschiedliche Preise zu erhaltenNächster Artikel：So verwenden Sie Javascript, um für jeden Tag innerhalb eines Datumsbereichs unterschiedliche Preise zu erhalten

In Verbindung stehende Artikel

Mehr sehen