vue 数组中引入动态地址图片

main.js

// 静态资源图片的访问路径，eg：<img :src="`${ASSET_HOST}/sign-default.png`" alt="">
//https://tuoluohuodong.oss-cn-shenzhen.aliyuncs.com/advertise_h5为图片的统一路径地址
Vue.prototype.ASSET_HOST = `https://tuoluohuodong.oss-cn-shenzhen.aliyuncs.com/advertise_h5`

 

html:

   <div class="red-envelope-wall">
       <img v-for="(item,index) in imgList" :key="index"  :src="item.img" alt="">
              
   </div>

 js:

<script>

export default {
    name: 'index',
   
    data() {
        return {
        imgList:[
            {id:1,img:(`${this.ASSET_HOST}/red_envelopes.png`)},
            {id:1,img:(`${this.ASSET_HOST}/red_envelopes.png`)},
            {id:1,img:(`${this.ASSET_HOST}/red_envelopes.png`)},
            {id:1,img:(`${this.ASSET_HOST}/red_envelopes.png`)},
            {id:1,img:(`${this.ASSET_HOST}/red_envelopes.png`)},
            {id:1,img:(`${this.ASSET_HOST}/red_envelopes.png`)},
            {id:1,img:(`${this.ASSET_HOST}/red_envelopes.png`)},
            {id:1,img:(`${this.ASSET_HOST}/red_envelopes.png`)},
            {id:1,img:(`${this.ASSET_HOST}/red_envelopes.png`)},
     
            ],
           
        };
    },

    }
</script>

css:

.red-envelope-wall img{
    width:200px;
    height:400px;
}