vue中的js引入图片,必须require进来
另外一个疏漏之处: vue中的html中的src和js中使用src是不一样的 并且合理使用 img的onerror事件<template><div class="dutyCont"><div class="onePerson"><div class=&q
另外一个疏漏之处: vue中的html中的src和js中使用src是不一样的 并且合理使用 img的onerror事件
<template>
<div class="dutyCont">
<div class="onePerson">
<div class="photoBorder">
<img :src= this.FzrIMAGE_PATH style="width:100%;height:100%;" :οnerrοr="errorGoodsImg">
<!-- <img src="../../assets/xiyong/ren.png" style="width:100%;height:100%;"> -->
</div>
<div>责任人:{{this.FzrNAME}}</div>
<div>手机:{{this.FzrPHONE}}</div>
</div>
<div class="onePerson">
<div class="photoBorder">
<img :src= this.ZbzIMAGE_PATH style="width:100%;height:100%;" :οnerrοr="errorGoodsImg">
<!-- <img src= 'xiyong/fzr.png' style="width:100%;height:100%;" :οnerrοr="errorGoodsImg"> -->
</div>
<div>维护人员:{{this.ZbzNAME}}</div>
<div>手机:{{this.ZbzPHONE}}</div>
</div>
</div>
</template>
<script>
import { getScreenInfo } from "@/api/api.js";
import userPhoto from '@/assets/xiyong/ren.png'
export default {
data() {
return {
FzrNAME: "", // 负责人名字
FzrIMAGE_PATH: "", //负责人图片
FzrPHONE: "", //负责人电话号码
ZbzNAME: "", //值班长名字
ZbzIMAGE_PATH: "", //值班长图片
ZbzPHONE: "" ,//值班长电话号码
errorGoodsImg:'this.src="' + userPhoto + '"',
};
},
mounted: function() {
this.getScreenInfo();
},
methods: {
getScreenInfo() {
getScreenInfo("getScreenInfo").then(res => {
let arr = res.data.data;
console.log(arr , 'arr');
for (let i = 0, len = arr.length; i < len; i++) {
if (arr[i].MARK == "FZR") {
this.FzrNAME = arr[i].NAME;
this.FzrPHONE = arr[i].PHONE;
this.FzrIMAGE_PATH = arr[i].IMAGE_PATH;
// console.log('图片地址', arr[i].IMAGE_PATH);
}
if (arr[i].MARK == "ZBC") {
this.ZbzNAME = arr[i].NAME;
this.ZbzPHONE = arr[i].PHONE;
this.ZbzIMAGE_PATH = arr[i].IMAGE_PATH;
}
}
});
}
}
};
</script>
<style scoped lang="less">
.dutyCont {
width: 224px;
height: 356px;
background: url("../../assets/xiyong/一级模块-责任人.png") no-repeat;
}
.onePerson {
position: relative;
left: 38px;
top: 30px;
margin-bottom: 16px;
}
.photoBorder {
width: 146px;
height: 99px;
background: url("../../assets/xiyong/一级模块-责任人-图片外框.png") no-repeat;
}
</style>
更多推荐
所有评论(0)