Visit the image URL stored by Alibaba cloud to preview the thumbnail directly on the web page instead of downloading it directly

When doing the grain college project , Because the teacher didn't make the backstage front end of the rotation map , Here I realized it myself , There's a problem , I'll make a list of the broadcast pictures first ：

Here are the pictures stored by Alibaba cloud URL It is directly displayed , I think it's better to show pictures here ,
Later, it was used in web pages img label ：

  <el-table-column  label=" Picture path " >
           <template slot-scope="scope">
                 <img :src="scope.row.imageUrl">
          </template>
   </el-table-column>

It's ridiculous , Here is a direct display of the whole picture , Later, I considered whether it was possible to show it in the form of a thumbnail , I really found , Alibaba cloud pictures url Followed by ?x-oss-process=image/resize,m_fill,h_100,w_200 You can show a thumbnail , You can also customize Width and Height, Here, the front end is directly spliced ：

Barely achieve the effect ：

Reference link ： Alibaba cloud oss How to get thumbnails of specified pictures 、 Video thumbnail