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

I am fairly new to Vue.js and have managed to build a simple table using the ui-element. The ui-element used for building the table is el-table and have displayed the various columns using el-table-column and prop (please find the code below). Now, I want to display images/avatars/thumbnail images in my table (ie, one of the column in the table should be filled with images). I do not know how to insert images in the tables as I am using prop to populate the table with data. My table code is as follows:

The HTML part in Vuejs:

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

I have consumed the data using axios and stored the information in an array called posts . I have used the posts array above in the html code, that is, :data = "posts". I have displayed the data on the web page using el-table-column and prop. The third column above represents the display picture, prop = "display_pic_url" represents the profile picture urls. But, I do not want to print this data (ie, the urls of the display pictire) on the table, instead, I want to display the profile picture hosted on the url. How do I achieve this? How do I display the profile picture in each row instead of just printing the url in each row?

I have displayed the table I have created below.

enter image description here

Please take a look at the code and suggest the modifications in the code to display the profile picture.

I would really appreciate any help I could get.

Thank you.

htmlvue.jsvuejs2vue-componentelement-ui


Solution 1:[1]

You can using 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>

Solution 2:[2]

You can using slot-scope like this:

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Eric Aya

Related Questions