如何在 table 中添加图像（使用 el-table、el-table-列），即在 Vue.js 中使用 ui-元素？

Question

我是 Vue.js 的新手，并且已经设法使用 ui 元素创建了一个简单的 table。用于构建 ui 的 ui-元素是 el-table 并且使用 el-table-column 和 prop (请在下面找到代码）。现在，我想在我的 table 中显示 images/avatars/thumbnail 个图像（即 table 中的一列应该填充图像）。我不知道如何在 table 中插入图像，因为我正在使用 prop 用数据填充 table。我的table代码如下：

Vuejs中的HTML部分：

<!--Table-->
    
          <el-table :data="posts"
                ref="Table"
                stripe
                style="width: 100%;">

                <el-table-column min-width="50" prop="name"
                   label="Username">
                </el-table-column>

                <el-table-column min-width="50" prop="count_followers"
                   label="Followers">
                </el-table-column>

                <el-table-column min-width="55"  prop="display_pic_url"
                   label="Display Pic">
                </el-table-column> -->
           </el-table>

我使用 axios 使用了数据并将信息存储在一个名为 posts 的数组中。我在 html 代码中使用了上面的 posts 数组，即：data = "posts"。我已经使用 el-table-column 和 prop 在网页上显示了数据。上面第三列代表展示图片，prop="display_pic_url"代表头像urls。但是，我不想在 table 上打印此数据（即显示图片的 urls），相反，我想显示托管在 url 上的个人资料图片.我如何实现这一目标？如何在每一行中显示个人资料图片而不是仅在每一行中打印 url？

我在下面显示了我创建的table。

请看一下代码并建议修改代码以显示个人资料图片。

如果能得到任何帮助，我将不胜感激。

谢谢。

Answer 1

您可以使用 slot-scope:

<el-table-column min-width="55"  prop="display_pic_url" label="Display Pic">
  <template slot-scope="scope">
      <img :src="scope.row.display_pic_url"/>
  </template>
</el-table-column>

Answer 2

您可以像这样使用 slot-scope：

<el-table-column align="center" label="Photo">
  <template slot-scope="scope">                        
     <img :src="`/uploads/${scope.row.image}`"  width="50px"/>                         
  </template>
</el-table-column>

如何在 table 中添加图像（使用 el-table、el-table-列），即在 Vue.js 中使用 ui-元素？

How to add an image in a table (using el-table, el-table-column), ie using ui-element in Vue.js?

html

vue.js

vue-component

vuejs2

element-ui