在使用antd-vue的卡片a-card時，遇到無法添加avatar圖標/頭像的問題，原因出在a-avatar，他不支持webpack圖片打包。
上代碼：
<a-card hoverable style="width: 300px">
<a-card-meta title="測試暫存" description="分診暫存數據">
<template #avatar>
<img src="../../../../../src/assets/new-user.webp" :style="{ width: '40%', opacity: '0.7' }">
<a-avatar
src="../../../../../src/assets/new-user.webp"
/>
</template>
</a-card-meta>
</a-card>
代碼中用img和a-avatar分別加載了avatar圖標/頭像，其結果如下圖
第一個img的圖片正常顯示，第二個a-avatar無法顯示，我們瀏覽器再F12查看一下打包后的圖片，如圖：
可以看到img打包后的路徑是/img/new-user.fc889256.webp，而a-avatar下面為空沒有圖片。為此我們要解決a-avatar不打包圖片問題
就要自己先完成圖片打包操作，將代碼做如下修改：
<a-card hoverable style="width: 300px">
<a-card-meta title="測試暫存" description="分診暫存數據">
<template #avatar>
<img src="../../../../../src/assets/new-user.webp" :style="{ width: '40%', opacity: '0.7' }">
<a-avatar
:src="require('../../../../../src/assets/new-user.webp')"
/>
</template>
</a-card-meta>
</a-card>
a-avatar原先的src="../../../../../src/assets/new-user.webp"改為:src="require('../../../../../src/assets/new-user.webp')"，讓src屬性完成
圖片打包操作，現在看修改后瀏覽器渲染結果：
可以看到，第二個a-avatar圖片已經成功加載，再打開F2查看打包后的代碼：
img和a-avatar都已經成功打包