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

最新推荐文章于 2025-03-24 17:32:50 发布

天王老子来了我也不改名

最新推荐文章于 2025-03-24 17:32:50 发布

阅读量2.2k

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_51143190/article/details/125107078

版权

vue 专栏收录该内容

3 篇文章

订阅专栏

这个示例展示了如何在Vue.js应用中使用`v-for`循环遍历书本列表，并通过`require()`函数动态加载每个书籍封面图片。图片存储在指定的目录下，同时结合`router-link`实现跳转到详细页面的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：
在这里插入图片描述

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 () {
  }
}