另外一个疏漏之处：  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>