vue（iview）没有图片时默认图片设置

<template>


        <Avatar style="background-color: #87d068" shape="square" size="large"
                icon="person"
                :src="url"/>
</template>
<style>

</style>
<script>
    import imgerror from "@/images/main/imgerror.png"
    import util from "@/libs/util.js"
    import $ from 'jquery';

    export default {
        name: 'image2',
        props: {
            src: String
        }, // 父组件传过来所需的url
        data() {
            return {
                loading: true,
                showOriginImg: false,
                width: '101px',
                url: '', // 先加载loading.gif
                imgId: 'image' + Math.ceil(Math.random() * 1000000),
                imgProp: {
                    imgwidth: 100,
                    imgheight: 100,
                    zoom: 0,
                    deg: 0,
                }

            }
        },
       watch:{
            src:function () {
                this.loadImg();
            }
        },
        methods: {

            loadImg() {
                // debugger;
                if (this.src) {

                    var self = this;
                    var newImg = new Image();
                    newImg.src = this.src;
                    newImg.onerror = () => {    // 图片加载错误时的替换图片
                        this.loading = false;
                        self.url = "";
                        // newImg.src = imgerror
                    }
                    newImg.onload = () => { // 图片加载成功后把地址给原来的img
                        self.loading = false;
                        self.url = newImg.src;
                        // self.imgProp.imgwidth = newImg.width;
                        // self.imgProp.imgheight = newImg.height;
                        // self.initWidth(newImg.width, self);
                    }
                }else {
                    this.url = "";
                }
            },
            // initWidth(widthN, self) {
            //     if (widthN < 170) {
            //         self.width = "200px";
            //     }
            //     else {
            //         self.width = (widthN + 30) + "px";
            //     }
            // },
//             showImageFunc() {
//                 this.showOriginImg = true;
//             },
//
//             rotate(v) {
//                 var deg = this.imgProp.deg = this.imgProp.deg + v;
//                 $('#' + this.imgId).css({
//                     '-webkit-transform': 'rotate(' + deg + 'deg)',
//                     '-moz-transform': 'rotate(' + deg + 'deg)',
//                     '-o-transform': 'rotate(' + deg + 'deg)',
//                     '-ms-transform': 'rotate(' + deg + 'deg)',
//                     'transform': 'rotate(' + deg + 'deg)'
//                 });
// //                $('#'+this.imgId).rotate(v);
//             },
//             //放大缩小
//             zoom(v) {
//                 var self = this;
//                 self.imgProp.zoom = self.imgProp.zoom + v;
//                 var width = self.imgProp.imgwidth + self.imgProp.imgwidth * self.imgProp.zoom;
//                 var height = self.imgProp.imgheight + self.imgProp.imgheight * self.imgProp.zoom;
//                 self.initWidth(width, self);
//                 $('#' + this.imgId).width(width);
//                 $('#' + this.imgId).height(height);
//             }
        },

        mounted() {
            this.loadImg();
        }
    }
</script>