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