一般来说图片有两种存储方式：
1.后端传完整在线地址
列表项img是一个完整地图片在线地址（https://www.xxx/img/1.jpg），后端传过来数组前端直接读取即可，img的url可以直接渲染。
2.图片存储在前端
当图片存储在前端的public文件夹下，后端的图片地址很可能是图片的名字，而不是路径，因为路径是前端的图片存储相对路径。
#python
[{
"id":1,"content":"xxxx","url":"9.png"},{
},{
}]
这个时候就需要前端接到后端传值去拼接路径了。
拼接路径做法：
created(){
//1.初始化函数里：从后端获取分类的数据。
//用到axios 从后端直接获取，不用传参。用get接收即可。
this.getdata()
},
methods:{
getdata(){
var that=this;
this.$axios.get("http://127.0.0.1:8000/v3baisort/")
.then(function(data){
// 2. 由于后端图片地址不是在线的,图片存储在项目中,
// 所以后端只是图片名,需要在这里拼接一下图片路径.
for(var i = 0; i < data["data"].length; i++){
var url1=data["data"][i].url
// 1)找到放图片路径的地方 拼接后端的图片名。
var imgurl=require('../../../public/img/goods/goodssort/'+url1)
// 2)给后端数组的图片url重新赋值
data["data"][i].url=imgurl
}
// 3)把后端数据赋给本页面catelist
that.catelist=data["data"]
}).catch(function(error){
alert(error)
})
},
}
这样写似乎很麻烦，有更简单的拼接方法：
直接用axios读取到图片名字。渲染的时候绑定img标签上的src,直接在src上拼接，不是更好吗？
这么想就要注意了，img不会识别这种动态绑定：
<img :src="'../../public/img'+item.url" /><br>
src绑定的会解析成一个纯字符串，只能通过axios里面require（）先包一下，拼接好再显示。