Github 页面为 Static 图像托管

Question

I am trying to use GitHub pages to host static images for a website I am working on.我正在尝试使用 GitHub 页面来托管我正在处理的网站的 static 图像。 The website randomizes div locations across the page, and it's supposed to use the photos from the repository.该网站在页面上随机分配 div 位置，并且应该使用存储库中的照片。 Here is the repository that is hosting the images.这是托管图像的存储库。

The issue is that the images are not loading from the Github pages.问题是图像没有从 Github 页面加载。 Am I not referencing the photos correctly in the Javascript?我没有正确引用 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.不确定我是否在 JS 中错误地引用了照片，或者我是否需要添加任何 HTML 代码来引用照片。 Either way, I would really appreciate any help.无论哪种方式，我都非常感谢任何帮助。 :) :)

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: 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

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.在 JavaScript Math.random() 返回介于 0 和 1 之间的浮点数。通过将其乘以 90，你得到一个浮点数，但你所有的照片都是整数。 And since your pictures start from 10.png it should look like this而且由于您的图片从 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