springboot+vue+elementui表格显示后端图片

在Spring Boot中使用Vue和Element UI来显示后端图片，可以按照以下步骤进行操作：

1. 在Spring Boot项目中，创建一个用于存储图片的文件夹，比如将其命名为"images"。
2. 将需要显示的图片上传到该文件夹中。

3. 在后端编写一个Controller，用于处理图片请求。可以添加一个接口，比如"/api/image/{imageName}"，用于获取某个特定图片的路径。

   @RestController
   @RequestMapping("/api/image")
   public class ImageController {
    
       @Value("${image.path}")
       private String imagePath;
    
       @GetMapping("/{imageName}")
       public void getImage(@PathVariable String imageName, HttpServletResponse response) throws IOException {
           File file = new File(imagePath + "/" + imageName);
           FileInputStream fis = new FileInputStream(file);
           IOUtils.copy(fis, response.getOutputStream());
       }
   }

配置文件中的image.path属性需要指向存放图片的文件夹路径。

4. 在Vue中，使用Element UI的表格组件来显示图片。首先在Vue组件中定义一个data属性，用于保存图片数据。

   data() {
       return {
           imageUrl: '/api/image/'
           tableData: []
       };
   }

"imageUrl"属性用于指定获取图片的接口路径。

5. 从后端获取图片数据，在Vue组件的"mounted"生命周期中发起一个请求，获取后端返回的图片数据，并将其赋值给表格的数据属性。

   mounted() {
       axios.get('/api/imageData')
           .then(response => {
               let data = response.data;
               // 对返回的data进行处理，将图片路径拼接上指定的路径
               data.forEach(item => {
                   item.imageUrl = this.imageUrl + item.imageName;
               });
               this.tableData = data;
           })
           .catch(error => {
               console.error('Error:', error);
           });
   }

6. 在表格的列定义中，使用Element UI的"el-table-column"组件来显示图片。

   <el-table-column prop="imageUrl" label="图片">
       <template slot-scope="scope">
           <img :src="scope.row.imageUrl" width="100" height="100">
       </template>
   </el-table-column>

通过以上的步骤，就可以在Spring Boot中使用Vue和Element UI来显示后端图片了。在表格中的图片列中，会显示相应的图片。