把数据库中的静态图片遍历在前端页面上[通俗易懂]

全栈程序员-站长 • 2022年5月10日下午9:20 • 未分类 • 阅读 48

大家好，又见面了，我是你们的朋友全栈君。

把数据库中的静态图片遍历在前端页面上

先上数据库中数据
在这里插入图片描述
其次是后端的接口(把所有数据封装到List集合中发送过去):

  @RequestMapping(value = "/scenicSpots",method = RequestMethod.GET)
    public ActionResult findScenicSpots(){
        List<ScenicSpots> scenicSpots = scenicSpotService.QueryScenicSpots();
        if(scenicSpots!=null){
            ActionResult result = new ActionResult(200, "成功了", scenicSpots);
            return result;
        }else{
            return new ActionResult(400,"查询失败",null);
        }

    }

然后是前端的数据(把数据放在项目中的@/assets/images底下):
在这里插入图片描述
前端代码:

			<el-col class="home-card">
              <!-- 卡片 -->
              <el-card class="home-item" v-for="info in infos" :key="info">
                <!-- 图片 -->
                <img :src="info.picture" width="300" height="210" />
                <div style="padding: 14px;"> <div style="align-top:10px" class="a2"> <p class="a3">{ 
   { 
   info.scenicSpotsName}}</p>
                    <h3
                      style="padding-bottom:10px;display:flex"
                    >开放时间:&nbsp;&nbsp;&nbsp;&nbsp;{ 
   { 
   info.startDate}}&nbsp;&nbsp;至&nbsp;&nbsp;{ 
   { 
   info.stopDate}}</h3>
                    <h3
                      style="padding-bottom:10px"
                    >最大容纳:&nbsp;&nbsp;&nbsp;&nbsp;{ 
   { 
   info.maxNumber}}&nbsp;&nbsp;人</h3>
                  </div>
                </div>
              </el-card>
            </el-col>

解释一下:用v-for=“info in infos” :key=”info”遍历从前端传过来的数据,
在这里插入图片描述
script部分的处理:

  created() { 
   
    // 获取全部数据 this.$axios .get("scenicSpots", { 
   })//向前端请求路径 .then((response) => { 
   
        console.log(response);
        this.infos = response.data.data;//把后端的数据赋值给infos
        for (var i = 0; i < this.infos.length; i++) { 
   //遍历一下传过来的数据的图片的信息
          this.infos[i].picture = require("@/assets/images/" +
            this.infos[i].picture);//用require处理一下图片
          console.log(this.infos[i].picture);//可以在浏览器看一下处理后的地址长什么样,我也不明白为什么能显示出来,希望大神赐教
        }
      }) .catch((error) => { 
   
        alert(error);
        console.log(error);
      });
  },