element显示图片

要在Element UI中显示图片，可以使用`<el-image>`组件。根据提供的引用内容，可以看到有几种不同的用法。

引用\[1\]中的示例代码展示了如何在`<el-table-column>`中使用`<el-image>`组件来显示图片。通过使用`v-for`指令遍历图片数组，可以为每个图片创建一个`<el-image>`组件，并设置`src`属性为图片的URL，`preview-src-list`属性为展示大图的数组。示例代码如下：

<el-table-column prop="images" label="配图" align="center" width="150">
  <template slot-scope="scope">
    <el-image v-for="(item, index) in scope.row.images" :key="index" :src="item" :preview-src-list="\[item\]"></el-image>
  </template>
</el-table-column>

引用\[2\]中的示例代码展示了如何在`<el-table-column>`中使用`<el-image>`组件来显示图片。通过使用`v-for`指令遍历图片数组，可以为每个图片创建一个`<el-image>`组件，并设置`src`属性为图片的URL，`preview-src-list`属性为展示大图的数组。示例代码如下：

<el-table-column property="img" label="现场照片">
  <template scope="scope">
    <div class="demo-image__preview">
      <el-image style="width: 100px; height: 100px; margin-left:10px;" v-for="item in scope.row.img" :src="item" :preview-src-list="scope.row.img"></el-image>
    </div>
  </template>
</el-table-column>

引用\[3\]中的示例代码展示了如何在`<el-table-column>`中使用`<el-image>`组件来显示图片。通过使用作用域插槽`v-slot:default="scope"`，可以在`<template>`中访问`scope.row.img`来获取图片数组，并将其作为`<el-image>`组件的`src`属性的值。示例代码如下：

<el-table-column prop="img" label="图片" width="100">
  <template v-slot:default="scope">
    <el-image :src="scope.row.img"></el-image>
  </template>
</el-table-column>

以上是三种不同的示例代码，根据你的具体需求选择适合的方式来显示图片。
#### 引用[.reference_title]
- *1* [vue如何让element-ui的table列表中展示多张图片（可放大）的效果？](https://blog.csdn.net/weixin_48373171/article/details/129880542)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [element 表格内显示图片](https://blog.csdn.net/gradonisis/article/details/113535315)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [vue表格显示图片，采用element ui实现](https://blog.csdn.net/qq_45564783/article/details/122717818)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]