Hi, I’m developing a Shopify app using Remix.
I’ve implemented image display, and it’s working.
Here’s the folder structure for images saved on Tigris Storage.
My bucket name: myhdd
images
|___ item-1.jpg
|___ item-2.jpg
|___ item-3.jpg
|___ item-4.jpg
|___ item-5.jpg
My example code:
import { useState, useEffect, useLoaderData } from 'react';
import { Page, Grid } from '@shopify/polaris';
import { S3Client, ListObjectsV2Command, GetObjectCommand } from '@aws-sdk/client-s3';
import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
const ImageItem = ( { item } ) => {
const [ imageUrl, setImageUrl ] = useState( null );
const S3 = new S3Client({
region: 'auto',
endpoint: 'https://fly.storage.tigris.dev',
credentials: {
accessKeyId: 'my_accessKeyId',
secretAccessKey: 'my_secretAccessKey'
}
});
const getImageUrl = async () => {
const ssd = await S3.send( new ListObjectsV2Command({ Bucket: 'myhdd' }) );
const image = ssd?.Contents?.find( obj => obj.Key === `images/${ item.handle }.jpg` );
const url = await getSignedUrl( S3, new GetObjectCommand({ Bucket: 'myhdd', Key: image.Key }), { expiresIn: 3600 } );
setImageUrl( url );
}
useEffect(
() => getImageUrl(),
[ item.handle ]
);
return (
<img width="100%" height="250" src={ imageUrl } style={{ objectFit: 'cover', objectPosition: 'center' }}/>
)
}
const App = () => {
const { myData } = useLoaderData(); // My data list.
return (
<Page title="Library">
<Grid>
{
myData.map(
item => (
<Grid.Cell key={ item.handle } columnSpan={{xs: 6, sm: 3, md: 3, lg: 6, xl: 6}}>
<ImageItem item={ item }></ImageItem>
</Grid.Cell>
)
)
}
</Grid>
</Page>
);
};
export default App;
And output image like this:
<img width="100%" height="250" style="object-fit: cover; object-position: center center;" src="https://myhdd.fly.storage.tigris.dev/images/item-01.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=tid_eGXVwyxdwSmrWzAqrEiNriyKBWDugrHNsiNMYOmDjuLIuZAoCi%2F20241022%2Fauto%2Fs3%2Faws4_request&X-Amz-Date=20241022T053225Z&X-Amz-Expires=3600&X-Amz-Signature=2bee4cedf69b159daac4e326d9f19fd18cb9a74cba18b752531af00673fd67eb&X-Amz-SignedHeaders=host&x-id=GetObject">
Is this setup correct? Is there a way to shorten the image path?
Assuming the setup is correct, how can I retrieve all images from the item-a folder?
images
|___ item-a
|___ item-a-1.jpg
|___ item-a-2.jpg
|___ item-2.jpg
|___ item-3.jpg
|___ item-4.jpg
|___ item-5.jpg
Thank in advanced!