Several ways for Vue to display pictures

foreword

Recently, I am working on my own project. There is such a requirement that the user list needs to display the user's avatar. It has not been dealt with before. Taking this opportunity, I just share my solution process.

The avatar column is empty, and a person with obsessive-compulsive disorder like me suffers to death!

insert image description here

First of all, let me declare that my data list is returned by querying the database interface, so the path of my avatar is also saved in the database:

I first went to the Internet to randomly search for some pictures and put them into the library. First, let them be displayed normally, and then change them to dynamically upload and display through the interface when I have time later.

insert image description here

Use native img tag

We can directly use the img tag to achieve. Specify the file path through its src attribute:

insert image description here

Forehead. . . The natively displayed picture seems a bit too big, let's simply give it some style:

insert image description here

Isn't this much better!

insert image description here

Relevant code:

 <el-table-column prop="image" label="头像" width="90"  align="center">
         <template slot-scope="scope">
　　　　    <img :src="scope.row.image" width="40" height="40" />
　　    </template>
      </el-table-column>

However, although this native method can be realized, it is a bit complicated if you want to modify something. For example, I want the avatar to display a circle.

At this time, you can use the pictures provided by the third party.

Avatars using ElementUI

A component provided by AvatarElementUI, which is specially used to process pictures and display user or thing information in the form of icons, pictures or characters.

It is also very convenient to use, basically the same as the img tag.

Official address: ElementUI-Avatar avatar

insert image description here

It provides some demos, as well as instructions and parameters, we can choose flexibly according to our own needs.

insert image description here

After selection, I chose one, the code and effect are as follows:

insert image description here

As you can see, the picture can also be displayed normally.

insert image description here

At this time, back to the requirement I just had, I want the avatar to be displayed in a circle instead of a square. It is very simple to use Avatar to modify this requirement, which requires changing an attribute:

shape: circle is the prototype avatar
shape: square is the square avatar

insert image description here

Refresh the next page to see:

insert image description here

Relevant code:

	!-- 
         shape 图片显示方式 circle为原型像 square为方形
         size 图片的大小
         src 图片的路径
        -->
      <el-table-column prop="image" label="头像" width="90"  align="center">
         <template slot-scope="scope">
             <el-avatar  shape="circle" :size="50" :src="scope.row.image"></el-avatar>
　　    </template>
      </el-table-column>

Parameter Description

Regarding its parameters, I will only say some simple and necessary ones. For other parameters, see the official website

size Set the size of the avatar
shape Set the shape of the avatar
src The resource address of the image avatar
fit When the display type is an image, set how the image fits into the container frame

Summarize

In fact, it is very simple, you only need to figure out the url of the picture.