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

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

1
2
3
4
5
6
7
8
9
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

三、ANTD 的 Avatar 實際使用範例

看完上面簡單的介紹後，下面提供我的一些簡單範例，若大家有興趣也可以到線上編輯器裡玩玩看唷！

我的 codepen 連結

https://ithelp.ithome.com.tw/upload/images/20221005/20140920iqHUCRQIgD.png
codepen 練習成果

註1：Img Alt是什麼？好的替代文字怎麼寫？SEO專家教你7秘訣！
註2：開源圖庫