vue v-for 遍历动态给图片img标签 src拼接路径问题
刚接触vue,v-for中获取字段都很正常,但是<img src="">中的路径不知道怎么拼接。还是我张哥出马,一个赶俩。废话少说直接上代码。在vm实例中的data加上url:window.fileUrl,获取路径,然后在<img :src="url+item.peoplePic">拼接。vue<div class="people_up block_hov...
刚接触vue,v-for中获取字段都很正常,但是<img src="">中的路径不知道怎么拼接。还是我张哥出马,一个赶俩。废话少说直接上代码。
在vm实例中的data加上url:window.fileUrl,获取路径,然后在<img :src="url+item.peoplePic">拼接。
vue
<div class="people_up block_hover" v-for="(item,index) in peopleArr" :key='item.rowId' @click="Lclick(item.rowGuid)">
<div class="picture"><img :src="url+item.peoplePic"></div>
<div class="name" id="f_people">{{item.name}}</div>
<div class="position" >{{item.address}}</div>
</div>
<script>
var vm = new Vue({
el: '#peoples',
data: {
peopleArr:[],
url:window.fileUrl //获取图片的路径前缀
},
mounted:function(){
this.initInfo('1')
},
methods:{
initInfo:function(){
let self = this;
$.ajax({
async: true,
url: window.serverUrl+'/lxtz/lxtzpeople/getPeople',
method: 'get',
dataType: 'JSON',
/* data:{
"categoryCode":''
}, */
success: function (res) {
self.peopleArr = res.data
console.log(res.data)
},
error: function (data) {
if (data.status == 0) {
parent.layer.close(parent.layer.index);
}
}
});
},
Lclick(msg){
window.open('people.html?rowGuid='+msg);
console.log(msg);
}
},
})
更多推荐
所有评论(0)