Front-end display pictures

http://localhost:8080/profile/upload/2023/07/10/b35dfcbe-4d2d-4057-9f74-d69e7e8e7a86.png Image path storage method

  <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>

The form of storing pictures in 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>

Guess you like

Origin blog.csdn.net/m0_56095048/article/details/131644397