網頁開發時常會遇到照片置放的需求，一般像是電商網站的商品照片、旅遊網的景點照片或官方網站的全景與物品照片，使用四方形的照片呈現都是較適合且常見的。但若是放置人像近照與臉部特寫照片時，通常會選擇圓形或圓角等方式進行修飾。然而在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 文件。

三、ANTD 的 Avatar 實際使用範例

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

我的 codepen 連結

codepen 練習成果

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