Pictures won't show up on github pages

My local with pictures worked. Now with GitHub pages the pictures won’t show up even if one video worked from the same database folder. I rechecked all potential pathways for src and nothing worked…I am really frustrated with Github Pages’ quirks…

https://scallahan101.github.io/EnglishTranslateASL/

Check it out and see one on the right side.

This isn’t a “quirk of Github pages”, this is expected behavior from a Unix server, which Github is.

In your Javascript file, you have specified your alphabet image files as (e.g.) “A.JPG”. However, in the repo they are named (e.g.) “A.jpg”. Unix is case-sensitive, unlike Windows. Try changing your Javascript so the filenames use lowercase “jpg”.

They were originally lowercase. The same error occurred. So I looked said jpg supposed to be cap. So I turned them to JPG.

No go either…

Error shown:

  1. Request URL:

https://scallahan101.github.io/EnglishTranslateASL/database/empty.JPG

  1. Request Method:

GET

  1. Status Code:

404

  1. Remote Address:

185.199.111.153:443

  1. Referrer Policy:

strict-origin-when-cross-origin

  1. Response Headers

  2. accept-ranges:

bytes

  1. access-control-allow-origin:

  2. age:

89

  1. content-encoding:

gzip

  1. content-length:

5232

  1. content-security-policy:

default-src ‘none’; style-src ‘unsafe-inline’; img-src data:; connect-src ‘self’

  1. content-type:

text/html; charset=utf-8

  1. date:

Mon, 02 Nov 2020 18:54:46 GMT

  1. etag:

W/“5f975b20-247b”

  1. server:
  1. status:

404

  1. strict-transport-security:

max-age=31556952

  1. vary:

Accept-Encoding

  1. via:

1.1 varnish

  1. x-cache:

HIT

  1. x-cache-hits:

1

  1. x-fastly-request-id:

fd444709d2ca2494c9b7de17e5e2c1571c40908d

  1. x-github-request-id:

F98A:0B49:13D315:182AD0:5FA0559C

  1. x-proxy-cache:

MISS

  1. x-served-by:

cache-den19621-DEN

  1. x-timer:

S1604343286.405609,VS0,VE0

  1. Request Headers

  2. :authority:

scallahan101.github.io

  1. :method:

GET

  1. :path:

/EnglishTranslateASL/database/empty.JPG

  1. :scheme:

https

  1. accept:

image/avif,image/webp,image/apng,image/,/*;q=0.8

  1. accept-encoding:

gzip, deflate, br

  1. accept-language:

en-US,en;q=0.9

  1. referer:

https://scallahan101.github.io/EnglishTranslateASL/

  1. sec-fetch-dest:

image

  1. sec-fetch-mode:

no-cors

  1. sec-fetch-site:

same-origin

  1. user-agent:

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.111 Safari/537.36

The capitalization must be exactly the same as the files in your repository. As long as that’s the case, upper or lower case or any mix all work just fine.

Looking at https://github.com/SCallahan101/EnglishTranslateASL/tree/master/database there is an empty.jpg file. And indeed I can download https://scallahan101.github.io/EnglishTranslateASL/database/empty.jpg.

But when I do I see another issue: The file I get isn’t a JPEG file, it’s a git LFS reference. I’m not sure if Github Pages is supposed to support LFS, maybe anyone else knows?

Did you check the Alpahabet letters files too? They doesn’t appear too. LFS was helping me upload large files such as pictures. Which is inside database directory.

Same thing: If I use the exact same spelling (e.g. https://scallahan101.github.io/EnglishTranslateASL/database/A.jpg) I can download the file, but I only get an LFS reference file, not the image.

I just checked the documentation, and indeed:

Notes:

  • Git LFS cannot be used with GitHub Pages sites.

So you’ll have to put the images directly into the repository. Which shouldn’t be an issue at a few hundred KB per image at most. I’m not so sure about the videos (haven’t checked their size), if they’re bigger than a few (!) MB you should probably find somewhere else to host them.

You are correct…I’m dumbfounded because of other issues I had with upload the picture. The solution was using Git LFS. Now, you pointed it out as a problem…I wasn’t sure if you went in the right direction. Thank you! - https://github.com/git-lfs/git-lfs/issues/3498

1 Like