For my training, I am creating a personal website using AngularJS. I am incorporating the Carousel feature from UI-Bootstrap. Here is an example of how I am using it:
HTML:
<carousel interval="interval" no-wrap="false">
<slide ng-repeat="slide in slides" active="slide.active">
<img class="img-responsive" ng-src="{{slide.image}}">
<div class="carousel-caption">
<h4>{{slide.text}}</h4>
</div>
</slide>
</carousel>
AngularJS:
angular.module('myWebSiteApp')
.controller('HikingCtrl', function ($scope) {
$scope.interval = 4000;
$scope.slides = [{
image: '/images/background/bg15.jpg',
text: 'Chiemsee Lake - Baviera'
}, {
image: '/images/background/bg13.jpg',
text: 'Plansee Lake - Austria'
},{
image: '/images/background/bg8.jpg',
text: 'Sentier des Roches'
},{
image: '/images/background/bg10.jpg',
text: 'Hochplatte - Baviera'
}];
});
Although this code works fine locally, I encounter a 404 error when I upload the website to the server: https://i.sstatic.net/UD4Vn.png
Interestingly, using the images with CSS instead of JavaScript works without any issues.
EDIT:
https://i.sstatic.net/cUvH1.png
Thank you in advance for your assistance.
Ysee