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

1.首先，你后台的项目列表中有可以访问的图片，如下（我将图片保存到数据库并同步保存到项目文件夹的static中）2.输入http:localhost:后台的端口+图片的名称有的同学可能看不懂上面的地址，我举个例子http://localhost:8188:111.jpg(就是这个样的)，意思是你的端口地址加上图片的名称就可以访问当前的图片了3.前端部分代码，只展示显示图片部分的<el-tab

梁同学与Android

5099人浏览 · 2020-09-25 16:00:07

梁同学与Android · 2020-09-25 16:00:07 发布

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已经在页面加载的时候被赋值了

结束！

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^