Vue-cli项目axios+require动态获取后台数据库的图片地址

template/body部分:

<img :src="require('@/assets/'+ this.img1 +'.png')" alt=""  />

ps.要用到的图片url为:src/assets/pf1.png (从pf1到pf9)

script标签部分:( 别忘了调用getPhoto() )

data(){
	return{
		id:'',
		img1:''
	}
},
methods:{
getPhoto(){
	var that =this;
	 that.$axios({
            url: '',
            method: "get",
            params:{id:that.id}
          }).then(r => {
          that.img1 = r.data[0].img;
          }).then(err =>console.log(err))
	     }
	  }

数据库部分:这里img直接存 “pf1” 到 “pf9” 就行了

{
  "id": "张三",
  "img": "pf6"
}

最终效果就是,当data中的id变化时,其对应的图片也会跟着变化

上一篇:预加载、懒加载


下一篇:pytorch 常用loss函数整理篇(三)