Maison >interface Web >js tutoriel >Résoudre le problème d'erreur lors de l'initialisation de la valeur de l'attribut src de l'image liée dynamiquement vue2.0

Résoudre le problème d'erreur lors de l'initialisation de la valeur de l'attribut src de l'image liée dynamiquement vue2.0

亚连
亚连original
2018-05-30 14:10:051814parcourir

Ci-dessous, je vais partager avec vous un article qui résout le problème d'une erreur lors de l'initialisation de la valeur de l'attribut src d'une image liée dynamiquement dans vue2.0. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Dans vue2.0, une syntaxe comme v-bind:src = " imgUrl " (abréviation : src = " imgUrl ") est souvent utilisée Jetez un œil à un cas

<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>

Comme dans le cas ci-dessus, puisque le champ de données captcha_id doit être obtenu via une requête réseau et que la page est susceptible d'avoir été rendue, une erreur 404 se produira à chaque fois qu'elle est chargé,

La valeur de l'attribut src de l'image est analysée comme 'http://www.demo.com/static/.png' lors de son initialisation.

La solution est la suivante :

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

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Instance d'encapsulation de la méthode de stockage du navigateur de Vue

Vue implémente la méthode pour quitter après avoir été invité à enregistrer

Exemple d'utilisation du plug-in de temps bootstrap-datetimepicker dans un projet angulaire

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn