Vue顯示圖片的幾種方式小結

2023-02-06 06:00:02

前言

最近在做自己的專案，有這麼一個需求，使用者列表需要展示使用者的頭像，之前一直沒有處理，趁著這次機會，正好分享下我的解決過程。

頭像這一欄空蕩蕩的，我這種強迫症患者難受死！

首先宣告下，我的資料列表是查詢資料庫介面返回的，那麼我頭像路徑也是儲存在資料庫的：

我先去網上隨便搜了點圖片入庫裡面，先讓他能正常展示著，後面有空了再改為通過介面動態上傳展示。

使用原生img標籤

我們可以直接使用img標籤去實現。通過它的src屬性指定檔案路徑：

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

這樣是不是好多了！

相關程式碼：

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

但是這種原生的方式雖然可以實現，但是如果想要修改一些東西，就顯得有些複雜了，比如我想讓頭像顯示圓形的。

這時候，可以藉助三方提供的圖片。

使用ElementUI的Avatar

AvatarElementUI提供的一個元件，它專門用來處圖片，用圖示、圖片或者字元的形式展示使用者或事物資訊。

它使用起來也特別方便，基本可以說和img標籤是一樣的。

官方地址：ElementUI-Avatar 頭像

裡面提供了一些demo，以及使用說明和引數，我們根據自己的需求靈活選擇即可。

經過挑選，我選擇了一款，程式碼和效果如下：

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

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

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

重新整理下頁面再看下：

相關程式碼：

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

引數說明

關於它的引數，我只說一些簡單的和必要的，其他引數詳見官網

size 設定頭像的大小
shape 設定頭像的形狀
src 圖片頭像的資源地址
fit 當展示型別為圖片的時候，設定圖片如何適應容器框

總結

其實還是很簡單的，只需要搞清楚圖片的url即可。

到此這篇關於Vue顯示圖片的幾種方式小結的文章就介紹到這了,更多相關Vue顯示圖片內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

Vue顯示圖片的幾種方式小結

目錄

前言

使用原生img標籤

使用ElementUI的Avatar

總結

熱門文章