Heim > Web-Frontend > js-Tutorial > Hauptteil

Lösen Sie das Fehlerproblem beim Initialisieren des src-Attributwerts dynamisch gebundener Bilder in vue2.0

亚连
Freigeben: 2018-05-30 14:10:05
Original
1772 Leute haben es durchsucht

Im Folgenden werde ich einen Artikel mit Ihnen teilen, der das Problem eines Fehlers beim Initialisieren des src-Attributwerts eines dynamisch gebundenen Bildes in vue2.0 löst. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich ist.

In vue2.0 wird häufig eine Syntax wie v-bind:src = „imgUrl“ (Abkürzung: src = „imgUrl“) verwendet. Schauen Sie sich einen Fall an

<template>
  <p>
    <img :src="imgUrl">
  </p>
</template>
<script>
export default {
  data(){
    return {
      captcha_id: "" 
    }
  },
  computed: {
    imgUrl(){
      return &#39; http://www.demo.com/static/ &#39;+ this.captcha_id + &#39;.png&#39;
    },
  },
  methods: {
    init(){
        // 此处省略一个请求 ,假设成功返回数据为 res
        this.captcha_id = res.data.captcha_id;
    },
  }  
  created(){
    this.init();
  }
}
</script>
<style lang="scss" scoped>
</style>
Nach dem Login kopieren

Da das Datenfeld captcha_id über eine Netzwerkanforderung abgerufen werden muss und die Seite wahrscheinlich gerendert wurde, tritt bei jedem Laden ein 404-Fehler auf

Das Bild Der src-Attributwert wird bei der Initialisierung als „http://www.demo.com/static/.png“ analysiert.

Die Lösung lautet wie folgt:

computed: {
    imgUrl(){
      if(this.captcha_id){
        return this.$store.state.cmnUrl +&#39;/v1/cmn/captcha/new/&#39; + this.captcha_id + &#39;.png&#39;
      }else{
        return null;
      }
    },
  },
Nach dem Login kopieren

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

Verwandte Artikel:

Kapselungsinstanz der Browserspeichermethode von Vue

Vue implementiert die Methode zum Beenden nach der Aufforderung zum Speichern

Verwendungsbeispiel des Bootstrap-Datetimepicker-Zeit-Plug-Ins im Angular-Projekt

Das obige ist der detaillierte Inhalt vonLösen Sie das Fehlerproblem beim Initialisieren des src-Attributwerts dynamisch gebundener Bilder in vue2.0. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage