Day20：Ant Design 的 Avatar

2022 iThome 鐵人賽

DAY 20

自我挑戰組

那些年我用 Ant Design 做過的網頁元件系列第 20 篇

14th鐵人賽

Annie

2022-10-05 23:27:10

556 瀏覽

分享至

網頁開發時常會遇到照片置放的需求，一般像是電商網站的商品照片、旅遊網的景點照片或官方網站的全景與物品照片，使用四方形的照片呈現都是較適合且常見的。但若是放置人像近照與臉部特寫照片時，通常會選擇圓形或圓角等方式進行修飾。然而在ANTD裡，也有一個名為 Avatar 的 component 可供方便使用，本篇文章將分享使用方式與實際可運用之案例。

一、最基本的使用方式：引用與呼叫它

import { Avatar } from 'antd';

const App = () => (
  <div>
      <Avatar size="large" src="https://joeschmoe.io/api/v1/random" />
  </div>
);

export default App;

二、Avatar 可添加的屬性

可以把 Avatar 當做一個 img tag，因為它支援 src 的引用方式讓我們可以放入後端給的圖片、也支援使用 icon 屬性單純放入 svg 圖檔，這個標籤本身已經將整個框框限制在正方形內，所以如果你剛好需要正方形，使用它就是可以少寫寬高值設定，個人覺得無論前後台開發都非常好用。下面列出幾項我開發最常用的，也可以點此連結去看更多官方 api 文件。

屬性名稱	可以使用的值	說明
alt	字串	圖片的替代文字，大家一定要養成寫這個屬性的習慣。它可以用於當網路速度太慢、圖片檔案出錯、瀏覽器禁用圖像等等，導致圖片失效的時候，Alt替代文字可以描述圖像的內容，作為補救措施。(註1)
src	字串或 ReactNode	你想要顯示的圖片
icon	ReactNode	你想要顯示的圖標
size	數字或 large 或 small 或 default	這個圖片要顯示的寬與高的px值，你可以直接給數字或者使用ANTD提供的三種尺寸(large: 40px, small: 24px)。預設為default的32px
shape	circle 或 square	圖片的形狀，提供圓形與正方形兩種，預設為圓形。
gap	數字	頭像的內邊距，如果你放置的是文字或icon的話比較需要使用，因為可能預設的正方形不夠完整顯示內容，預設為4