vue显示列表中的多张本地照片

效果：

1.html
bookList为书的列表其中的第i个item对应的照片为booki.jpg，
存储在…/assets/books/目录下

注意这里的路径不能使用{{this.id}}这种变量，且要使用require（）函数并将路径断开

<div class="booksnew_card" v-for="(item,index) in bookList" :key="item.id">
        <router-link :to="{path: '/book',query:{id:item.id}}">
          <el-image
            style="width: 82%; height: 190px;margin:5px 9%"
            :src="require('../assets/books/book'+(index+1)+'.jpg')"
            fit="fill"></el-image>
          <div style="width: 86%;margin: 0px 7%">
            <a href="#" class="booksnew_text">
              {{item.name}}
            </a>
            <div class="booksnew_author">
              {{item.author}}
            </div>
          </div>
        </router-link>
 </div>

2.我所使用的数据

export default {
  name: 'GalleryBook',
  data () {
    return {
      bookList: [
        {
          id: 1,
          name: '六层楼先生 怀孕呵护指南 第十一诊室',
          author: '六层楼先生 著',
          price: 95.00,
          imgS: '../assets/books/book1.jpg'
        },
        {
          id: 2,
          name: '活着（余华代表作，精装。当当专享印签藏书票+限量赠珍藏复刻手稿）',
          author: '余华 著',
          price: 45.90,
          imgS: '../assets/books/book2.jpg'
        },
        {
          id: 3,
          name: '三体：全三册 刘慈欣代表作，亚洲“雨果奖”获奖作品！',
          author: '刘慈欣 著',
          price: 90.00,
          imgS: '../assets/books/book2.jpg'
        },
        {
          id: 4,
          name: '我的第一套中国神话故事（全彩12册）',
          author: '步印编辑部 改编',
          price: 154.40,
          imgS: '../assets/books/book4.jpg'
        }
      ]
    }
  },
  methods: {
  },
  created () {
  }
}