Dream_Cap Dream_Cap - 6 months ago 16
AngularJS Question

Github pages won't show images on AngularJS 1.x site?

I made a simple one page site with Angular 1.x, and it won't load my images on Github pages. Here is the link to the github pages site:

https://capozzic1.github.io/angular-car-spa-v2/

I've checked other stackoverflow posts regarding this and can't seem to find the answer. I just have 2 images that I'm trying to load on a simple slider. Here is the code from my directive js file:

this.carData = [{
class:'A4',
name: "Audi A4",
tagline: "The time is now.",
img: "/img/big/car1.jpg"
},
{
class:'A5',
name: "Audi A5",
tagline: "Do you like power?",
img: "/img/big/car2.jpg"}
];


Here is the link to the repo if you want to see the folder structure:

https://github.com/capozzic1/angular-car-spa-v2

I've also verified that both images are working in the repo.

Answer Source

You need to remove the slash from the image url as your website is not hosted on the root. You need to provide the proper relative path. Change the json to below

this.carData = [{
                class:'A4',
                name: "Audi A4",
                tagline: "The time is now.",
                img: "img/big/car1.jpg"
                },
                {
                class:'A5',
                name: "Audi A5",
                tagline: "Do you like power?",
                img: "img/big/car2.jpg"}
              ];