<commonTable :columns="column" :data="tableData" :pager="page" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" @handleSelectionChange="handleSelectionChange"> <el-table-column slot="seqNumber" label="序号" :index="(page.page - 1) * page.size + 1" type="index" align="center" width="64"></el-table-column> <img class="pic" :src="baseUrl + 'mgr/file/showImgByPath?imgPath=' + tableData.depthPic" /> </commonTable> 这个图片展示不出来在组件中,如何让其展示
时间: 2023-07-17 17:01:12 浏览: 119
首先,请确保图片路径 `tableData.depthPic` 是正确的。接下来,您可以尝试使用 `require` 来加载图片,以确保它能在组件中正确展示。
您可以将代码修改为以下形式:
```html
<template>
<commonTable :columns="column" :data="tableData" :pager="page" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" @handleSelectionChange="handleSelectionChange">
<el-table-column slot="seqNumber" label="序号" :index="(page.page - 1) * page.size + 1" type="index" align="center" width="64"></el-table-column>
<el-table-column label="图片">
<template slot-scope="scope">
<img class="pic" :src="require(baseUrl + 'mgr/file/showImgByPath?imgPath=' + scope.row.depthPic)" />
</template>
</el-table-column>
</commonTable>
</template>
```
在这个修改后的代码中,我们在 `el-table-column` 组件中添加了一个 `slot-scope` 属性,并在其中使用 `require` 方法来加载图片。这样可以确保图片能够在组件中正确展示。注意,`require` 方法需要传入一个静态的图片路径,所以我们将动态的 `tableData.depthPic` 放在字符串拼接中。
希望这个解决方案能够帮助到您!如果还有其他问题,请随时提问。
阅读全文