前端展示图片

最新推荐文章于 2024-09-10 15:13:53 发布

yu_zheng5163

最新推荐文章于 2024-09-10 15:13:53 发布

阅读量575

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_56095048/article/details/131644397

版权

http://localhost:8080/profile/upload/2023/07/10/b35dfcbe-4d2d-4057-9f74-d69e7e8e7a86.png 图片路径存储方式

  <el-table-column label="抓取图片" align="center" prop="imgUrl" width="400px">
        <template slot-scope="scope" >
            <el-popover
              placement="right"
              width="400"
              trigger="click">
               <img :src="scope.row.imgUrl" width="400px" height="400px" >
            <img slot="reference" :src="scope.row.imgUrl" width="100px" height="100px" >
          </el-popover>
        </template>
      </el-table-column>

base64存图片的形式

 <el-table-column label="初始截图" align="center" prop="startImgUrl" width="200px">
            <template slot-scope="scope" >
                <el-popover
                  placement="right"
                  width="300"
                  trigger="click">
                   <img :src="'data:image/jpeg;base64,'+scope.row.startImgUrl" width="400px" height="300px" >
                <img slot="reference" :src="'data:image/jpeg;base64,'+scope.row.startImgUrl" width="80px" height="60px" >
              </el-popover>
            </template>
          </el-table-column>