Github 页面为 Static 图像托管

Question

我正在尝试使用 GitHub 页面来托管我正在处理的网站的 static 图像。 该网站在页面上随机分配 div 位置，并且应该使用存储库中的照片。 这是托管图像的存储库。

问题是图像没有从 Github 页面加载。 我没有正确引用 Javascript 中的照片吗？ 这是一张照片，显示了我运行它时页面的样子。 如您所见，没有任何图像加载到网页中。 不确定我是否在 JS 中错误地引用了照片，或者我是否需要添加任何 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>

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 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;
}

Answer 1

在 JavaScript Math.random() 返回介于 0 和 1 之间的浮点数。通过将其乘以 90，你得到一个浮点数，但你所有的照片都是整数。 而且由于您的图片从 10.png 开始，它应该看起来像这样

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';

Github 页面为 Static 图像托管

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-09-13 17:59:19

Github 页面为 Static 图像托管

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-09-13 17:59:19

解决方案1
0 已采纳 2022-09-13 17:59:19