CODEWITHSUNDEEP
htmlcssgithub-pages
Alejandro CM
Alejandro CM

Reputation: 13

Github Pages not showing Icons and images of my CSS

i've read some post here where the main problem when images are not showing on Github pages is because it is case sensitive. ive been dealing with the same problem of images not showing but in this case i dont see the mistake.

.header--button span{
display: inline-block;
width: 13px;
height: 8px;
margin-left: 10px;
background-image: url('/assets/icons/down-arrow.svg');

this is the way i've placed most of the images but still ican find where am i mistaking?

thisis the link to my repo https://github.com/AlejandroCaputo/Batatabit_CryptoProject

this is the link to my github page https://alejandrocaputo.github.io/Batatabit_CryptoProject/index.html

what am i missing ?

Upvotes: 1

Views: 4857

Answers (5)

Ammar Fasih Hanif
Ammar Fasih Hanif

Reputation: 11

This could be due to the following any or all reasons;

github is case sensitive so make sure that following are not same,

images.jpg != Images.jpg != images.JPG

The path directory needs to be checked, down-arrow.svg is actually to be located at /Batatabit_CryptoProject/assets/icons/down-arrow.svg

OR

/assets/icons/down-arrow.svg

Hope this would be helpful.

Upvotes: 0

Muradtheoz
Muradtheoz

Reputation: 580

I hope your problem solved. But in next time if you can't figure how to solve that problem! just copy image/icon address from your github repo. Open images from your repo and copy the address from it and then paste the link in your imge src. Then it will work. like your Icon link of git repo is : https://raw.githubusercontent.com/AlejandroCaputo/Batatabit_CryptoProject/069113465c3018bc1b4835cfaa2f658c5be68f0c/assets/icons/batata.svg you have to post this link into your code icon src option.

Upvotes: 0

Gopinath
Gopinath

Reputation: 4937

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.

Upvotes: 1

Abdulrahman Ali
Abdulrahman Ali

Reputation: 615

I'm sure if this gonna work, but I think you could try relative paths instead of absolute ones. For example in your case, change the following

.header--button span {
  display: inline-block;
  width: 13px;
  height: 8px;
  margin-left: 10px;
  background-image: url('./assets/icons/down-arrow.svg');
}

Upvotes: 0

PolarisRouge
PolarisRouge

Reputation: 435

Looks like your path was incorrect. Remove the / before assets

.header--button span{
display: inline-block;
width: 13px;
height: 8px;
margin-left: 10px;
background-image: url('assets/icons/down-arrow.svg');

Upvotes: 0

Related Questions