Heim >Web-Frontend >js-Tutorial >Lösen Sie das Fehlerproblem beim Initialisieren des src-Attributwerts dynamisch gebundener Bilder in vue2.0

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

亚连
亚连Original
2018-05-30 14:10:051814Durchsuche

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>

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;
      }
    },
  },

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!

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