Github Pages as Static Image Hosting-CodePudding

I am trying to use GitHub pages to host static images for a website I am working on. The website randomizes div locations across the page, and it's supposed to use the photos from the repository. Here is the repository that is hosting the images.

The issue is that the images are not loading from the Github pages. Am I not referencing the photos correctly in the Javascript? Here is a photo that shows what the page looks like when I run it. As you can see, none of the images load into the webpage. Not sure if I am referencing the photo incorrectly in the JS, or if I need to add any HTML code to reference the photos. Either way, I would really appreciate any help. :)

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>page</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <script src="assets/js/script.js"></script>
    <!-- <script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script> -->

</head>
<body>
    <h1><b>Issy B. Designs</b></h1><br>
    <div ></div>
</body>
</html>

JS:

const imgPoss = [];

let maxX, maxY;

function placeImg() {
    const NUM_OF_IMAGES = 90; // set this to however images you have in the directory.
    const randImg = Math.random() * NUM_OF_IMAGES;
    const imgSrc = 'https://elimcgehee.github.io/staticimages/gallery/'   randImg.toString()   '.png';

    const {random: r} = Math;  
    const x = r() * maxX;
    const y = r() * maxY;
    
    if(!isOverlap(x,y)) {
        var link = `<img  style="left: ${x}px; top: ${y}px;" src="${imgSrc}" />`;
        var bodyHtml = document.body.innerHTML;
        document.body.innerHTML = bodyHtml   link;
        
        imgPoss.push({x, y}); // record all img positions
    }
}

function isOverlap(x, y) { // return true if overlapping
    const img = {x: 128, y:160};
    
    for(const imgPos of imgPoss) {
        if( x>imgPos.x-img.x && x<imgPos.x img.x &&
            y>imgPos.y-img.y && y<imgPos.y img.y ) return true;
    }
    return false;
}

onload = function() {
    maxX = innerWidth - 128;
    maxY = innerHeight - 160;
    setInterval(placeImg, 10);
}

onresize = function() {
    maxX = innerWidth - 128;
    maxY = innerHeight - 160;
}

CodePudding user response：

In JavaScript Math.random() returns float between 0 and 1. By multiplying it by 90 you get a float, but all your photos are intigers. And since your pictures start from 10.png it should look like this

const NUM_OF_IMAGES = 90; // set this to however images you have in the directory.
const START_OF_IMAGES = 10;
    const randImg = Math.round(Math.random() * NUM_OF_IMAGES   START_OF_IMAGES);
    const imgSrc = 'https://elimcgehee.github.io/staticimages/gallery/'   randImg.toString()   '.png';