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

最新推荐文章于 2023-05-29 11:35:08 发布

invincible_yj

最新推荐文章于 2023-05-29 11:35:08 发布

阅读量1.2k

点赞数 1

本文链接：https://blog.csdn.net/invincible_yj/article/details/108509852

版权

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

先上数据库中数据
在这里插入图片描述
其次是后端的接口(把所有数据封装到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);
      });
  },