I have a problem when using virtualization methods from Tanstack Virtual and Million JS. I have a React JS program code that aims to load all image files from the local folder at src/assets/images to be displayed, but the result is that my code is not working as intended. The code I created does not display any images; instead, it shows a white screen. Below, I present the code and a screenshot of the result.
Below is the code that I have developed:
import React from 'react';
import { useVirtualizer } from '@tanstack/react-virtual';
import { For } from 'million/react'
const Images = () => {
const parentRef = React.useRef(null);
const imageModules = import.meta.glob('/src/assets/images/*.{png,jpe?g,jpg}');
const gallery = Object.keys(imageModules).map((path) => {
const imageUrl = new URL(path, import.meta.url).href;
return imageUrl;
});
const imgCount = gallery.length;
debug: true
const rowVirtualizer = useVirtualizer({
count: imgCount,
estimateSize: () => 100,
getScrollElement: () => parentRef.current,
})
const virtualItems = rowVirtualizer.getVirtualItems();
return (
<div className="flex gap-4 " ref={parentRef}>
<For
each={virtualItems}
style={{
height: `${rowVirtualizer.getTotalSize()}px`,
width: '100%',
position: 'relative',
}}
as="div"
>
{(item) => (
<div
key={item.key}
style={
{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
fontSize: '20px',
height: '100%',
transform: `translateY(${item.start}px)`,
}
}
>
{/* Image {item.index} */}
<a href={item.key} target="_blank" rel="noopener noreferrer">
<img
src={item.key}
alt={`Image ${item.index}`}
/>
</a>
</div>
)}
</For>
</div>
);
};
export default Images;
I earnestly hope that my fellow individuals here can provide advice for me, as this is crucial to me. Thank you