开发喵星球

若依前后端分离版如何在表格中预览图片(九十一)

默认的img组件不会携带VUE_APP_BASE_API不能被代理,通过image-preview封装的预览组件会自动携带VUE_APP_BASE_API会被代理。

  1. 使用img预览组件
<el-table-column label="图片" align="center" prop="url">
    <template slot-scope="scope">
        <img :src="scope.row.url" alt="" style="width: 45px;height: 45px">
    </template>
</el-table-column>
  1. 使用image-preview预览组件(推荐使用)
<!-- 内链地址预览 -->
<el-table-column label="图片" align="center" prop="url" width="100">
  <template slot-scope="scope">
      <image-preview :src="scope.row.url" :width="50" :height="50"/>
  </template>
</el-table-column>

<!-- 外链地址预览 -->
<el-table-column label="图片" align="center" prop="url" width="100">
  <image-preview src="http://ruoyi.vip/images/logo.png" />
</el-table-column>
   
分类:Java/OOP 作者:无限繁荣, 吴蓉 发表于:2024-01-05 09:12:29 阅读量:156
<<   >>


powered by kaifamiao