Vue怎么将后台(springboot)中的图片显示到前端表格中

1.首先,你后台的项目列表中有可以访问的图片,如下(我将图片保存到数据库并同步保存到项目文件夹的static中)

在这里插入图片描述
2.输入http:localhost:后台的端口+图片的名称
有的同学可能看不懂上面的地址,我举个例子

http://localhost:8188:111.jpg(就是这个样的),意思是你的端口地址加上图片的名称就可以访问当前的图片了
在这里插入图片描述
3.前端部分代码,只展示显示图片部分的

  <el-table style="width: 100%" height="330px" :data="tableData" border stripe >
    <el-table-column align="center" type="index" label="#"></el-table-column>
    <el-table-column align="center" label="图片" prop="imageId">
      <template slot-scope="scope">
        <img  style="width: 100%" :src="petImage(scope.$index,scope.row)"/>
      </template>
    </el-table-column>
  </el-table>
methods: {
      //图片路径
      petImage(index, row) {
          var url = "http://localhost:8188/"+row.imageId
          console.log(url)
          return url
      },
}

前提是,你这个imageId已经在页面加载的时候被赋值了

结束!

©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页