diff --git a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatar.tsx b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatar.tsx
index f86694883128..82eca0ec5f0c 100644
--- a/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatar.tsx
+++ b/packages/mask/src/plugins/Avatar/SNSAdaptor/NFTAvatar.tsx
@@ -17,6 +17,7 @@ import { useI18N } from '../../../utils'
 import { EthereumChainBoundary } from '../../../web3/UI/EthereumChainBoundary'
 import { AddNFT } from './AddNFT'
 import { NFTImage } from './NFTImage'
+import { useImageNFTFilter } from '../hooks/useImageNFTFilter'
 
 const useStyles = makeStyles()((theme) => ({
     root: {},
@@ -160,20 +161,14 @@ export function NFTAvatar(props: NFTAvatarProps) {
                                 : uniqBy(
                                       [...collectibles_, ...collectibles],
                                       (x) => x.contractDetailed.address && x.tokenId,
-                                  )
-                                      .filter(
-                                          (token: ERC721TokenDetailed) =>
-                                              token.info.imageURL &&
-                                              !token.info.imageURL?.match(/\.(mp4|webm|mov|ogg|mp3|wav)$/i),
-                                      )
-                                      .map((token: ERC721TokenDetailed, i) => (
-                                          <NFTImage
-                                              token={token}
-                                              key={i}
-                                              selectedToken={selectedToken}
-                                              onChange={setSelectedToken}
-                                          />
-                                      ))}
+                                  ).map((token: ERC721TokenDetailed, i) => (
+                                      <NFTImageCollectibleAvatar
+                                          key={i}
+                                          token={token}
+                                          selectedToken={selectedToken}
+                                          setSelectedToken={setSelectedToken}
+                                      />
+                                  ))}
                         </Box>
                         <Box className={classes.buttons}>
                             <Button variant="outlined" size="small" onClick={() => setOpen_(true)}>
@@ -195,3 +190,20 @@ export function NFTAvatar(props: NFTAvatarProps) {
         </>
     )
 }
+interface NFTImageCollectibleAvatarProps {
+    token: ERC721TokenDetailed
+    setSelectedToken: React.Dispatch<React.SetStateAction<ERC721TokenDetailed | undefined>>
+    selectedToken?: ERC721TokenDetailed
+}
+
+function NFTImageCollectibleAvatar({ token, setSelectedToken, selectedToken }: NFTImageCollectibleAvatarProps) {
+    const { classes } = useStyles()
+    const { value: imageToken, loading } = useImageNFTFilter(token)
+    if (loading)
+        return (
+            <div className={classes.skeletonBox}>
+                <Skeleton animation="wave" variant="rectangular" className={classes.skeleton} />
+            </div>
+        )
+    return imageToken ? <NFTImage token={imageToken} selectedToken={selectedToken} onChange={setSelectedToken} /> : null
+}
diff --git a/packages/mask/src/plugins/Avatar/hooks/useImageNFTFilter.ts b/packages/mask/src/plugins/Avatar/hooks/useImageNFTFilter.ts
new file mode 100644
index 000000000000..58e5dc05a2bf
--- /dev/null
+++ b/packages/mask/src/plugins/Avatar/hooks/useImageNFTFilter.ts
@@ -0,0 +1,31 @@
+import type { ERC721TokenDetailed } from '@masknet/web3-shared-evm'
+import { useAsync } from 'react-use'
+
+// filter out nft with image resource
+export function useImageNFTFilter(collectible: ERC721TokenDetailed) {
+    return useAsync(async () => {
+        if (!collectible.info?.imageURL) return null
+        const { pathname } = new URL(collectible.info?.imageURL ?? '')
+        if (/\.(gif|svg|png|webp|jpg|jpeg)$/.test(pathname)) return collectible
+        if (/\.(mp4|webm|mov|ogg|mp3|wav)$/.test(pathname)) return null
+        const contentType = await getContentType(collectible.info?.imageURL ?? '')
+        if (contentType.startsWith('image/')) return collectible
+        return null
+    }, [collectible])
+}
+
+async function getContentType(url: string) {
+    if (!/^https?:/.test(url)) {
+        return ''
+    }
+    return Promise.race([
+        new Promise((resolve) => setTimeout(() => resolve(''), 20000)),
+        new Promise((resolve) => {
+            fetch(url, { method: 'HEAD', mode: 'cors' })
+                .then((response) =>
+                    response.status !== 200 ? resolve('') : resolve(response.headers.get('content-type')),
+                )
+                .catch(() => resolve(''))
+        }),
+    ]) as Promise<string>
+}