github页面加载图像严格原点时交叉原点

Question

我用托盘在github页面上创建一个静态页面。我使用以下代码加载图像：

function createDeck(call) {
    let deck = [];
    let jarOfPromise = [];
    for (let x of ["B", "C", "S", "D"]) {
        for (let y of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]) {
            jarOfPromise.push(
                new Promise(resolve => {
                    let tempCard = new Card(y, x); // create card with value and seed
                    
                    tempCard.imgCard.addEventListener('load',
                        function () {
                            resolve(true);
                        });
                    tempCard.imgCard.setAttribute('crossOrigin', 'same-origin');
                    tempCard.imgCard.src = createImgFileName(y, x);
                    deck.push(tempCard);
                })
            );
        }
    }

    Promise.all(jarOfPromise).then(_ => {
        call(deck);
    });
}

function createImgFileName(val, seed, dir = "cardsImg") {
    return "../" + dir + "/" + val.toString() + seed + ".jpg"
    // example "../cardsImg/1B.jpg"
}

但是当加载页面时，我有一个strict-origin-when-cross-origin`

这是我的项目：

https://github.com/Clingonboy/foraccio-0.1.0

当我用实时服务器在我的计算机上尝试某个项目时，它就能工作了。

我搜索这个问题，但我找不到信息来理解我的错误在哪里。

Answer 1

你的图像就是找不到

改变这个

"../" + dir + "/" + val.toString() + seed + ".jpg"

到这个

"./" + dir + "/" + val.toString() + seed + ".jpg"