前台页面的数据通过vue从后台laravel框架的接口获取,

页面刚进来的时候,谷歌浏览器报出错误

因为前台显示的照片是放在storage下面的,是因为路径的问题,图片的地址放在src上出现了问题,看下sre装的路径:

可以看出来问题就是出在这里

后面的解决方法是,将图片文件的路径抽出来,在渲染的时候,再次拼接上去:

代码:

var srcStorage = '/storage/'    //抽出图片的路径
    var app = new Vue({
        el: "#app",
        data() {
            return {
                cleaner_idcard_back:"",//反面照
                cleaner_idcard_front:"",//正面照
            };
        },
        created() {
            var _self = this;
            axios.post('/api/v1', api_data_sign(post_data, 'mrf'))
                .then(function (response) {
                    var datas = response.data;
                    if (datas.code == 200) {
                        _self.cleaner_idcard_front = srcStorage + datas.data.cleaner_idcard_front;//将抽出来的路径拼接上去
                        _self.cleaner_idcard_back = srcStorage + datas.data.cleaner_idcard_back;//将抽出来的路径拼接上去
                    }

                }).catch(function (error) {
                 console.log(error);
            });
        },

前端页面就可以改写成

改完之后,页面重新刷新,不会报错了.

个人总结:会报错的原因是vue的post请求返回的数据还没绑定到src的时候就渲染了,所以才会报错,

扫描二维码关注公众号，回复： 3762248 查看本文章

这个错误解决掉之后,,以后要维护代码也就相对的方便!,而且src绑定的值很精简,就一个变量!