springboot+vue+myabtis-plusl以表格形式从本地路径中取出与书籍id对应的照片并在前端显示出来的的具体代码

以下是示例代码，仅供参考：

1. 创建书籍实体类

import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;

@Data
@TableName(value = "book")
public class Book {
    private Long id;
    private String name;
    private String coverPath;
}

2. 创建书籍Mapper接口

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.demo.entity.Book;
import org.apache.ibatis.annotations.Mapper;

import java.util.List;

@Mapper
public interface BookMapper extends BaseMapper<Book> {
    List<Book> selectBookList();
}

3. 创建RESTful API

import com.example.demo.entity.Book;
import com.example.demo.mapper.BookMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.core.io.ResourceLoader;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import java.io.File;
import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Paths;
import java.util.Base64;
import java.util.List;

@RestController
public class BookController {
    @Autowired
    private BookMapper bookMapper;

    @Autowired
    private ResourceLoader resourceLoader;

    @GetMapping("/book/list")
    public List<Book> getBookList() {
        return bookMapper.selectBookList();
    }

    @GetMapping("/book/cover")
    public String getBookCover(Long bookId) throws IOException {
        String coverPath = bookMapper.selectById(bookId).getCoverPath();
        byte[] imageBytes = Files.readAllBytes(Paths.get(coverPath));
        return Base64.getEncoder().encodeToString(imageBytes);
    }
}

4. 在Vue中使用axios获取书籍列表数据，并在表格中展示

<template>
  <div>
    <el-table :data="bookList">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="书籍名称"></el-table-column>
      <el-table-column label="书籍封面">
        <template slot-scope="scope">
          <img :src="getBookCoverUrl(scope.row.id)">
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      bookList: []
    }
  },
  mounted() {
    axios.get('/book/list').then(response => {
      this.bookList = response.data
    })
  },
  methods: {
    getBookCoverUrl(bookId) {
      return `/book/cover?bookId=${bookId}`
    }
  }
}
</script>

5. 在CSS中为表格和图片添加样式

.el-table {
  width: 100%;
  margin-bottom: 20px;
  border: none;
}

.el-table th, .el-table td {
  padding: 10px;
  text-align: center;
  vertical-align: middle;
  border: none;
}

.el-table th {
  background-color: #f5f7fa;
  font-weight: bold;
}

.el-table img {
  max-width: 100%;
  max-height: 100%;
}

请注意，以上代码仅为示例代码，具体实现细节需要根据你的具体需求和技术栈进行调整。