Vue顯示圖片的方式有哪些

這篇文章主要介紹“Vue顯示圖片的方式有哪些”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“Vue顯示圖片的方式有哪些”文章能幫助大家解決問(wèn)題。

首先聲明下，我的數(shù)據(jù)列表是查詢(xún)數(shù)據(jù)庫(kù)接口返回的，那么我頭像路徑也是保存在數(shù)據(jù)庫(kù)的：

我先去網(wǎng)上隨便搜了點(diǎn)圖片入庫(kù)里面，先讓他能正常展示著，后面有空了再改為通過(guò)接口動(dòng)態(tài)上傳展示。

使用原生img標(biāo)簽

我們可以直接使用img標(biāo)簽去實(shí)現(xiàn)。通過(guò)它的src屬性指定文件路徑：

額。。。原生展示的圖片好像有點(diǎn)太大了，我們簡(jiǎn)單給點(diǎn)樣式吧：

這樣是不是好多了！

相關(guān)代碼：

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

但是這種原生的方式雖然可以實(shí)現(xiàn)，但是如果想要修改一些東西，就顯得有些復(fù)雜了，比如我想讓頭像顯示圓形的。

這時(shí)候，可以借助三方提供的圖片。

使用ElementUI的Avatar

AvatarElementUI提供的一個(gè)組件，它專(zhuān)門(mén)用來(lái)處圖片，用圖標(biāo)、圖片或者字符的形式展示用戶(hù)或事物信息。

它使用起來(lái)也特別方便，基本可以說(shuō)和img標(biāo)簽是一樣的。

里面提供了一些demo，以及使用說(shuō)明和參數(shù)，我們根據(jù)自己的需求靈活選擇即可。

經(jīng)過(guò)挑選，我選擇了一款，代碼和效果如下：

可以看到，也是一樣可以正常展示圖片的。

這時(shí)候回到我剛才那個(gè)需求，我要讓頭像以圓形顯示而不是方形，使用Avatar修改這個(gè)需求特別簡(jiǎn)單，這需要更換一個(gè)屬性即可：

shape ：circle為原型頭像
shape ：square為方形頭像

刷新下頁(yè)面再看下：

相關(guān)代碼：

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

參數(shù)說(shuō)明

關(guān)于它的參數(shù)，我只說(shuō)一些簡(jiǎn)單的和必要的，其他參數(shù)詳見(jiàn)官網(wǎng)

• size 設(shè)置頭像的大小

• shape 設(shè)置頭像的形狀

• src 圖片頭像的資源地址

• fit 當(dāng)展示類(lèi)型為圖片的時(shí)候，設(shè)置圖片如何適應(yīng)容器框

關(guān)于“Vue顯示圖片的方式有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。