diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/ITO.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/ITO.tsx
index 2e910ff9d7fb..5d9940820e1a 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/ITO.tsx
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/ITO.tsx
@@ -29,7 +29,7 @@ import { usePostLink } from '../../../components/DataSource/usePostInfo'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
 import { TokenIcon } from '@masknet/shared'
 import { activatedSocialNetworkUI } from '../../../social-network'
-import { getAssetAsBlobURL, getTextUILength, useI18N } from '../../../utils'
+import { getTextUILength, useI18N } from '../../../utils'
 import { WalletMessages } from '../../Wallet/messages'
 import { ITO_EXCHANGE_RATION_MAX, MSG_DELIMITER, TIME_WAIT_BLOCKCHAIN } from '../constants'
 import { sortTokens } from './helpers'
@@ -39,6 +39,7 @@ import { useDestructCallback } from './hooks/useDestructCallback'
 import { useIfQualified } from './hooks/useIfQualified'
 import { usePoolTradeInfo } from './hooks/usePoolTradeInfo'
 import { checkRegionRestrict, decodeRegionCode, useIPRegion } from './hooks/useRegion'
+import { usePoolBackground } from './hooks/usePoolBackground'
 import { ITO_Status, JSON_PayloadInMask } from '../types'
 import { StyledLinearProgress } from './StyledLinearProgress'
 import { SwapGuide, SwapStatus } from './SwapGuide'
@@ -233,7 +234,7 @@ export function ITO(props: ITO_Props) {
     const [claimDialogStatus, setClaimDialogStatus] = useState(SwapStatus.Remind)
 
     // assets
-    const PoolBackground = getAssetAsBlobURL(new URL('../assets/pool-background.jpg', import.meta.url))
+    const { value: PoolBackground } = usePoolBackground()
 
     const { pid, payload } = props
     const { regions: defaultRegions = '-' } = props.payload
@@ -853,7 +854,7 @@ export function ITO(props: ITO_Props) {
 
 export function ITO_Loading() {
     const { t } = useI18N()
-    const PoolBackground = getAssetAsBlobURL(new URL('../assets/pool-loading-background.jpg', import.meta.url))
+    const { value: PoolBackground } = usePoolBackground()
     const { classes } = useStyles({})
     return (
         <div>
@@ -872,7 +873,7 @@ export function ITO_Loading() {
 export function ITO_Error({ retryPoolPayload }: { retryPoolPayload: () => void }) {
     const { t } = useI18N()
     const { classes } = useStyles({})
-    const PoolBackground = getAssetAsBlobURL(new URL('../assets/pool-loading-background.jpg', import.meta.url))
+    const { value: PoolBackground } = usePoolBackground()
     return (
         <Card
             className={classNames(classes.root, classes.loadingWrap)}
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/ShareDialog.tsx b/packages/mask/src/plugins/ITO/SNSAdaptor/ShareDialog.tsx
index 432658ea1c99..854ceddae0ef 100644
--- a/packages/mask/src/plugins/ITO/SNSAdaptor/ShareDialog.tsx
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/ShareDialog.tsx
@@ -6,7 +6,8 @@ import type { BigNumber } from 'bignumber.js'
 import { useCallback } from 'react'
 import ActionButton from '../../../extension/options-page/DashboardComponents/ActionButton'
 import { activatedSocialNetworkUI } from '../../../social-network'
-import { getAssetAsBlobURL, useI18N } from '../../../utils'
+import { useI18N } from '../../../utils'
+import { usePoolBackground } from './hooks/usePoolBackground'
 
 const useStyles = makeStyles()((theme) => ({
     shareWrapper: {
@@ -62,7 +63,7 @@ export interface ShareDialogProps extends withClasses<'root'> {
 }
 
 export function ShareDialog(props: ShareDialogProps) {
-    const ShareBackground = getAssetAsBlobURL(new URL('../assets/share-background.jpg', import.meta.url))
+    const { value: ShareBackground } = usePoolBackground()
     const { t } = useI18N()
     const classes = useStylesExtends(useStyles(), {})
     const { token, actualSwapAmount, shareSuccessText, onClose } = props
diff --git a/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/usePoolBackground.ts b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/usePoolBackground.ts
new file mode 100644
index 000000000000..8b40e0b945aa
--- /dev/null
+++ b/packages/mask/src/plugins/ITO/SNSAdaptor/hooks/usePoolBackground.ts
@@ -0,0 +1,6 @@
+import { useAsync } from 'react-use'
+import { getAssetAsBlobURL } from '../../../../utils'
+
+export function usePoolBackground() {
+    return useAsync(async () => getAssetAsBlobURL(new URL('../../assets/pool-background.jpg', import.meta.url)), [])
+}
diff --git a/packages/shared-base/src/utils/getAssetAsBlobURL.ts b/packages/shared-base/src/utils/getAssetAsBlobURL.ts
index 78e1db5cd33d..408351af8996 100644
--- a/packages/shared-base/src/utils/getAssetAsBlobURL.ts
+++ b/packages/shared-base/src/utils/getAssetAsBlobURL.ts
@@ -3,9 +3,9 @@ const cache = new Map<string, string>()
  * Fetch a file and turn it into blob URL.
  * This function must run in React concurrent mode.
  */
-export function getAssetAsBlobURL(url: string | URL, fetcher: (url: string) => Promise<Blob>) {
+export async function getAssetAsBlobURL(url: string | URL, fetcher: (url: string) => Promise<Blob>) {
     url = url.toString()
-    if (!cache.has(url)) throw toBlob(url, fetcher)
+    if (!cache.has(url)) return toBlob(url, fetcher)
     return cache.get(url)!
 }
 async function toBlob(url: string, fetcher: (url: string) => Promise<Blob>) {