External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

randomized ImageBanner

Browse Source
This commit is contained in:
plebbitor
2023-03-06 13:55:31 +01:00
parent 01e06258d9
commit 4b9a1a8ed5
2 changed files with 13 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/banners/banner-14.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB

src/components/ImageBanner.jsx
+13 -3
View File
@@ -7,14 +7,19 @@ const ImageBanner = () => {
const location = useLocation();
useEffect(() => {
const countImages = async () => {
const images = await importAll(require.context('../../public/assets/banners', false, /\.(png|jpe?g|svg)$/));
setCurrentImage(Math.floor(Math.random() * images.length) + 1);
};
setIsLoaded(false);
setCurrentImage(Math.floor(Math.random() * 13) + 1);
countImages();
}, [location.key]);
useEffect(() => {
setIsLoaded(false);
const img = new Image();
img.src = `/assets/banners/banner-${currentImage}.jpg`;
img.src = `${process.env.PUBLIC_URL}/assets/banners/banner-${currentImage}.jpg`;
img.onload = () => {
setIsLoaded(true);
};
@@ -22,9 +27,14 @@ const ImageBanner = () => {
return (
<>
{isLoaded && <img id="banner-img" src={`/assets/banners/banner-${currentImage}.jpg`} alt="banner" />}
{isLoaded && <img id="banner-img" src={`${process.env.PUBLIC_URL}/assets/banners/banner-${currentImage}.jpg`} alt="banner" />}
</>
);
};
// Helper function to import all images from a directory
function importAll(r) {
return r.keys().map(r);
}
export default ImageBanner;