When clicking on page-2 button in pagination, images, css and js files are not loaded

I have a website where I keep my posts. and I used pagination for this. When I click on page 2, css, javascript and images are not loaded on the new page.
page1:

page2:

It gives an error like this:

[2021-05-16 14:42:16] ERROR /post-5/imgs/sprite.svg' not found. [2021-05-16 14:42:16] ERROR /post-5/imgs/favicon.png’ not found.
[2021-05-16 14:42:24] ERROR /page2/scripts/index.js' not found. [2021-05-16 14:42:25] ERROR /page2/imgs/blog.png’ not found.
[2021-05-16 14:42:25] ERROR /page2/imgs/sprite.svg' not found. [2021-05-16 14:42:25] ERROR /page2/imgs/favicon.png’ not found.

I found the cause of the error. Since the links(css,js imgs) in the index.html file in the page2 folder created in the _site folder are prepared according to the index file in the main directory. but i don’t know the solution

Start your links/URLs with a ‘/’.

Indeed.

Do some research on absolute vs relative URLs.

If you right click and view source you can see the path to CSS and images requested and if you click on a link you can see where it goes.

Or view the JS console in inspect mode and you’ll see errors logged and where the attempted URL points.

Absolute path

/imgs/sprite.svg

It will work when loaded on any of these

/
/about.html
/foo/bar.html

Relative path

imgs/sprite.svg

Same as ./imgs/sprite.svg

It will work when loaded on any of these

/
/about.html

But…

On /foo/bar.html or any subdirectory, whether created by paging or not, it will break

It will become this effectively if you view in the DOM or the JS console.

/foo/imgs/sprite.svg

Which will of course break.

Jekyll solution

Start URLs with /

img src="/imgs/sprite.svg"

And if you use GitHub Pages for sites on /my-repo/ as home use the relative URL filter. So like this

img src="{{ '/imgs/sprite.svg' | relative_url }}"

Which becomes

`/my-repo/imgs/sprite.svg`

Oh and for convention, you can do img rather than imgs

The common style of naming is this. In Jekyll these are all under assets usually too.

assets/
  img/
    foo.png
  css/
    styles.css
  js/
    main.js