图片不显示在选项卡 Vuejs 中

Question

我创建了一个方法 « numberMatch »，在点击时将存储在变量中的 gif 推送到选项卡中。该方法运行良好，但是当我调用模板中的选项卡而不是 gif 时，它是显示为字符串值的 gif 路径。有人可以告诉我如何让 gif 正确显示在页面上吗？模板中选项卡中显示图片的div是这个：

<div>{{this.gifTab}}</div>

<script>

export default {
   name:'Body',
   data() {
       return {
           luckyNumber:'',
           randomNumber:'',
           number: 0,
           gifCharles:require("../assets/jpg/isolation-charles.png"),
           gifTab:[],
           scoresTab:[],
           total:0,
       }
   },

       methods: {
           RandomNumbGenerator(){
               this.randomNumber =  Math.floor(Math.random()*11);
               return this.randomNumber
           },

           InputValue(){
               this.luckyNumber = document.getElementById("input_lucky_numb").value;
           },

           NumberMatch(){
               if(this.randomNumber == this.luckyNumber){
                 var tabGif = this.gifTab.push(this.gifCharles)
                 return tabGif
               }
           }
       },
};
</script>

Answer 1

您需要添加一个image element。

替换

{{this.gifTab}}

与

<img :src="gifTab"/>

图片不显示在选项卡 Vuejs 中

Images don’t show in tab Vuejs

arrays

variables

tabs

animated-gif

vue.js