使用GitHub Pages托管静态图片时加载失败的问题排查

我正在开发一个网站，尝试用GitHub Pages托管静态图片，网站会在页面中随机放置元素并调用仓库中的图片。目前图片无法从GitHub Pages加载，怀疑是JavaScript中引用图片的方式有误，也不确定是否需要添加额外HTML代码来引用图片。

相关代码 #

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 class="random"></div>
</body>
</html>

JavaScript代码 #

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 class="random" 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;
}

排查与解决要点 #

1. 修复图片文件名生成逻辑
   当前randImg是浮点数（例如23.456），但实际图片文件名应为整数（例如23.png），导致URL无效。修改为整数随机数：

   const randImg = Math.floor(Math.random() * NUM_OF_IMAGES);
   

2. 验证图片路径有效性
   手动访问一张图片的完整URL，确认图片存在于仓库的gallery目录下，且GitHub Pages已完成部署（仓库需开启Pages功能，分支选择正确）。

3. 优化DOM操作方式
   每次修改document.body.innerHTML会重新渲染整个页面，效率极低且可能引发异常。改用创建元素的方式添加图片：

   if(!isOverlap(x,y)) {
       const img = document.createElement('img');
       img.className = 'random';
       img.style.left = `${x}px`;
       img.style.top = `${y}px`;
       img.src = imgSrc;
       document.body.appendChild(img);
       imgPoss.push({x, y});
   }
   

4. 确保图片定位样式生效
   需为.random类添加绝对定位样式，否则left/top属性不会生效：

   .random {
       position: absolute;
       width: 128px;
       height: 160px;
   }
   

内容的提问来源于stack exchange，提问作者Eli McGehee