图片不显示在标签 Vuejs

问题描述

我创建了一个 «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>

解决方法

您需要添加一个 。

替换

# display(df.T.head())
      1990  1991  1992  1993  1994  1995  1996  1997  1998  1999  2000  2001
col1     0     1     0     2     4     7     5     0     1     5     3     6
col2     4     7     5     7     1     0     1     4     3     7     8     0
col3     7     5     0     0     5     6     1     7     7     1     5     4
col4     3     0     1     0     5     4     4     5     0     1     0     1
col5     7     8     9     6     8     8     6     5     7     6     3     7

# transpose and plot
axes = df.T.plot(kind='bar',subplots=True,layout=[3,4],figsize=(15,7),legend=False,rot=0)

# to change ylim of the subplots,if needed
for ax in axes.flatten():
    ax.set_ylim(0,30)

与

{{this.gifTab}}