Images Not Displaying in Github Pages

Images not displaying in Github Pages?

Nevermind, I solved it.

If anyone has the same problem.

GitHub Pages are case sensitive. Not only for folders, but also for image names.

Image not displaying on github pages though displays when running off my local machine

If you're trying to say that your image doesn't load it's mostly because the code can't locate the file, go to the folder where the image is located, drag the image to open a new chrome or safari page and when that is complete copy the link that pops up into the src in your html.

Github Pages not showing Icons and images of my CSS

The cause of the problem of icon images not being shown is due to the 'reference path' of the images.

For example, the image named 'down-arrow.svg' is

actually located at

/Batatabit_CryptoProject/assets/icons/down-arrow.svg,

but is being referred as:

 /assets/icons/down-arrow.svg

The problem can be fixed in 2 ways:

1. Refer to the image with its actual full path,
   I.E., by using /Batatabit_CryptoProject/assets/icons/down-arrow.svg

2. Refer to the image using a relative path, I.E. by removing the leading / from the image reference.

Images not appearing in Github webpage

Path to your images should be "images/filename" instead of "../images/filename"

Index.html and images are in the same directory so for accessing something in the same directory you dont need to add "." or ".."

Image not displaying at a GitHub page?

The link you have as src https://ibb.co/gPvZ7JQ is an HTML page.

You can verify that by performing a HEAD request.

I'm using curl in a bash shell

$ curl -I https://ibb.co/gPvZ7JQ
HTTP/1.1 200 OK
Server: nginx
Date: Sun, 19 Dec 2021 05:15:29 GMT
Content-Type: text/html; charset=UTF-8 >>>>>>>>>> HERE
...

The content-type indicates what kind of response it is for the browser to be able to render.

If you visit the URL in the browser and inspect the webpage go to the Network tab and set the Img filter you can see this page requesting the image. Screenshot

In the headers for the image's request you can see this

accept-ranges: bytes
access-control-allow-methods: GET, OPTIONS
access-control-allow-origin: *
cache-control: max-age=315360000
cache-control: public
content-length: 311784
content-type: image/png >>>>> so this is an image

The URL need not indicate whether this resource is an image or not.

For example

https://example.com/image.png          # May or may not be an image, could be a 404 and a html
https://example.com/image              # May be an image even when `.png` isn't there in the url
https://example.com/image.html         # Can also be an image if the site developer is nuts

So the solution for determining whether the URL is an image (or something else like video) is to pay attention to the Content-Type response header.

This is what every browser does and you should do too when in doubt.

And in your case, the URL will be https://i.ibb.co/Nm123Kf/my-oc-Uw-U-modified.png which can be found in the network tab or by inpect element on the image.

Images not showing up on GitHub pages

There are a couple of things that may be wrong.

1. Possibly uncapitalising the file extension so it is .jpg instead of .JPG could fix the problem.

2. Maybe it is showing up but is really small. Try adding a fixed width and height to it and see if that helps.

---

Related Topics