Search code examples
jquerygithub-pagesparceljs

gh-page hosting Parcel v2 built project contains static image assets that would not be displayed when live

Project website hosting on https://bigyajuu.github.io/my-portfolio/. The images in question are supposed to be viewed via these following clickable containers: Click any of these container Error images in question

When deploying my project to gh-page, images that were being handled dynamically by jQuery would show up errors.

I am using pure TS/JS-HTML-CSS for my project, bundled using Parcel v2.

When Parcel builds, reporter plugin parcel-reporter-static-files-copy would automatically move my asset folder img/ into dist/ folder, in hope that the image paths can be correctly found when built. But the images still won't show up.

The project directory can be summarized as follows:

\
    .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

Just to make clear, the way jQuery handles my images is as follows: (/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 then appends to another element, which replaces another element somewhere inside the html.

package.json scripts: ...

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

During the development, I run npm run live for building and opening the website on :1234. The images there might be able to show, probably after I cleared all caches.

When deploying to gh-page, predeploy is run instead. Images would not show this time.

When inspecting elements, gh-page returns GET https://bigyajuu.github.io/img/works/<any images> 404 (Not Found) in the console.

The goal is to let the images show on live gh-page build.

The other attempts when I was able to make images show in local environment is to run parcel build src/index.html img/**. But I really don't quite understand how this command works.

Sorting out static asset has been a HUGE mess for me over the months, hopefully someone could help. Thanks!

Solution

  • Solved my own problem so simply... ta...

    It turns out that the dist/ folder is built by Parcel being hosted on https://bigyajuu.github.io/my-portfolio/.

    But I set the root of the image files as /. That just points to https://bigyajuu.github.io/.

    To correct the paths you need to make sure the root is ./. That is all.

    E.g.: ./img/something/somethingElse.png

    And for the reason why these images work normally in dev environment - of course they do. It's localhost:1234. The root can have some leeway for that.

    And remember to check Inspect Elements at all times.