Vue img: src splicing problem

<img v-if="scope.row" :src= "this.$api.imgServer.down+scope.row.coverImage" style="width: 100px;height: 100px; "/>


< hr >

where scope.row.coverImage is taken out as file-uploads/cf.png, and this.$api.imgServer.down is the address for server image management, which shows that imgServer is not defined.
Let me write let pic = this.$api.imgServer.down; in mounted (), and then src = "pic + scope.row.coverImage" will report the error of roperty or method "pic" is not defined on the instance but referenced during
how should I spell it

Just after publishing the question,

suddenly came up with the idea of writing return this.$api.cfg.imgServer.down in computed (). As a calculation attribute, and then splice it into src to successfully solve the problem

 picUrl(){
      return this.$api.cfg.imgServer.down
    }
<img v-if="scope.row" :src= "picUrl()+scope.row.coverImage" style="width: 100px;height: 100px; "/>

 
 


< hr >
Oct.13,2021

the this here is written directly in the html tag. You don't know what it means.
you can try it like this.

<img v-if="scope.row" :src= "getImgUrl(scope.row)" style="width: 100px;height: 100px; "/>
method:{
    getImgUrl(row){
        return this.$api.imgServer.down+row.coverImage;
    }
}
Menu