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

小咪咪 2022-05-14 06:52 130阅读 0赞

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>