diff --git a/client/packages/design/components/AvatarWithPreview/index.tsx b/client/packages/design/components/AvatarWithPreview/index.tsx
index 5837f2c9..1db0af79 100644
--- a/client/packages/design/components/AvatarWithPreview/index.tsx
+++ b/client/packages/design/components/AvatarWithPreview/index.tsx
@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
 import { Avatar, AvatarProps } from '../Avatar';
 import { Image, imageUrlParser } from '../Image';
+import { isValidStr } from '../utils';
 
 export const AvatarWithPreview: React.FC<AvatarProps> = React.memo((props) => {
   const [visible, setVisible] = useState(false);
 
-  const hasImage = typeof props.src === 'string';
+  const hasImage = isValidStr(props.src);
 
   return (
     <>