gh-page 托管 Parcel v2 构建的项目包含静态图像资源，实时时不会显示

Question

项目网站托管于 https://bigyajuu.github.io/my-portfolio/。有问题的图像应该通过以下可点击容器查看：

将我的项目部署到 gh-page 时，由 jQuery 动态处理的图像会显示错误。

我的项目使用纯 TS/JS-HTML-CSS，并使用 Parcel v2 进行捆绑。

当Parcel构建时，reporter插件

parcel-reporter-static-files-copy

会自动将我的资源文件夹

img/

移动到

dist/

文件夹中，希望构建时能够正确找到图像路径。但图像仍然无法显示。

项目目录可概括如下：

\
    .github\
    .parcel-cache\
    dist\
        img\ (outside img\ moves to here when built)
        ... (where built items lie)
    img\ (asset folder)
    src\ (source codes)
    node_modules\
    .parcelrc
    .package.json
    .package-lock.json

澄清一下，jQuery 处理我的图像的方式如下： （/src/ts/engine/mixin-components/overview-dialog.ts）

$slideshow
    .append(
        $('<img>')
            .attr({
            'src': this.images[i].path,
            'title': this.images[i].title,
        })
    .addClass('x-scrollable-item-slideshow')
);

$slideshow

然后附加到另一个元素，该元素替换 html 中某处的另一个元素。

package.json

脚本： ...

"scripts": {
    "build": "parcel build src/index.html",
    "open": "parcel src/index.html --open",
    "live": "npm run build && npm run open",
    "predeploy": "parcel build src/index.html --public-url ./ && cp src/.htaccess dist",
    "sass": "sass --watch css",
    "tsc_watch": "tsc -w"
}

在开发过程中，我运行

npm run live

在

:1234

上构建和打开网站。那里的图像也许能够显示，可能是在我清除所有缓存之后。

部署到 gh-page 时，会运行

predeploy

。这次图片不会显示。

检查元素时，gh-page 在控制台中返回

GET https://bigyajuu.github.io/img/works/<any images> 404 (Not Found)

。

目标是让图像显示在实时 gh 页面构建上。

当我能够使图像在本地环境中显示时，其他尝试是运行

parcel build src/index.html img/**

。但我真的不太明白这个命令是如何工作的。

几个月来，整理静态资产对我来说是一个巨大的混乱，希望有人能提供帮助。谢谢！

Answer 1

如此简单地解决了我自己的问题...ta...

事实证明，当 dist/ 文件夹是由

https://bigyajuu.github.io/my-portfolio/

上托管的 Parcel 构建时。

但是我将图像文件的根目录设置为

/

。这只是指向

https://bigyajuu.github.io/

。

要更正路径，您需要确保根目录是

./

。仅此而已。

为什么这些图像在开发环境中正常工作 - 当然可以。是

localhost:1234

。根可以有一些余地。

并记住始终检查检查元素。