fix: error load image from CDN

AstraProtocol · Jul 11, 2023 · bd6b3da · bd6b3da
1 parent 2e48e63
commit bd6b3da
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/utils/image.ts b/utils/image.ts
@@ -0,0 +1,3 @@
+export const imageLoader = ({ src, width, quality }) => {
+	return `${src}?w=${width}&q=${quality || 85}`
+}
diff --git a/views/tokens/[instance]/NftOverview.tsx b/views/tokens/[instance]/NftOverview.tsx
@@ -3,16 +3,15 @@ import clsx from 'clsx'
 import BackgroundCard from 'components/Card/Background/BackgroundCard'
 import Row from 'components/Grid/Row'
 import Image from 'next/image'
+import { imageLoader } from 'utils/image'
 
 interface Props {
 	token: string
 	tokenId: string
 	tokenData: TokenNFTMetadata
 }
 
-const imageLoader = ({ src, width, quality }) => {
-	return `${src}?w=${width}&q=${quality || 85}`
-}
+
 
 const NftOverview = ({ token, tokenData, tokenId }: Props) => {
 	const { isMobile } = useMobileLayout()

diff --git a/views/tokens/tabs/InventoryTab/InventoryItem.tsx b/views/tokens/tabs/InventoryTab/InventoryItem.tsx
@@ -2,6 +2,7 @@ import clsx from 'clsx'
 import Typography from 'components/Typography'
 import Image from 'next/image'
 import { LinkMaker } from 'utils/helper'
+import { imageLoader } from 'utils/image'
 import styles from './style.module.scss'
 
 type Props = {
@@ -34,7 +35,16 @@ export default function InventoryItem({ index, tokenAddress, token }: Props) {
 				</Typography.LinkText>
 			</div>
 			<div className={clsx(styles.borderLeft, styles.colImage, 'col-6 padding-left-lg block-ver-center')}>
-				{tokenImage && <Image src={tokenImage} alt={token.tokenId} height={50} width={80} layout="fixed" />}
+				{tokenImage && (
+					<Image
+						loader={imageLoader}
+						src={tokenImage}
+						alt={token.tokenId}
+						height={50}
+						width={80}
+						layout="fixed"
+					/>
+				)}
 			</div>
 		</div>
 	)