ajax后台返回json到vue显示图片：SpringCloud+vue

vue ajax访问springcloud，返回一个图片路径：C:\Users\yckj1221\Desktop\goods\5.jpg
然后在vue的页面中无法显示，其路径变为:http://localhost:8080/C:\Users\yckj1221\Desktop\goods\5.jpg

解决办法：

1、进入vue项目build文件夹下的webpack.dev.conf.js，注释掉contentBase：false

然后就会报这个错误：Not allowed to load local resource:
网上一些解决办法是说不允许直接使用本地路径，要自己建一个虚拟路径

 

2、然后这个方法对我来说不适用，我的解决办法是

把图片放在当前项目底下，才能vue页面发起ajax请求到Java后台，返回json值，然后显示
图片的真实路径，如：D:\NodeJiaoCheng\Demo\my-project\static\img\3.jpg
那么在vue项目的static文件夹下要新建一个img文件夹，里面存放图片

主要代码：

vue里面的data()，用来装返回json值的图片地址

selectAll()执行ajax，返回json并赋值给img[]

template用来显示图片

data() {
      return {
        img:[
        ]
      }
    },

selectAll: function () {
       var self = this;
        $.ajax({
          type:'POST',
          url:'http://localhost:8763/selectAll',
          data:{
          },
          success:function (backDate) {
            // 得到包含图片真实地址的json
            let photoUrl = backDate[0].photo;
            for (let i = 0; i < backDate.length; i++) {
              self.img.push(backDate[i].photo.substring(32));
            }
            //self.img.push(photoUrl.substring(32));
           console.log(self.img[0]);
            //self .data = backDate;
            // 清空原数组
            data.rows.splice(0,data.rows.length);
            // 把从数据库中取得的数据赋值到页面要显示的数组里
            Array.prototype.push.apply(data.rows,backDate);
            console.log(backDate);
          }
        })

在你需要显示图片的地方，加下面的这个代码
<template v-for="(row, index) in img ">
        <tr>
          <td><img :src="row"/></td>
        </tr>
      </template>