Error 404 GET Image when I use AngularJS

Question

I am programming a personal website with AngularJS (for my training). I use the Carousel from UI-Bootstrap like this :

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'
    }];
});

When I test this code in local it works but when I upload the website on the server it does not work... I have an error 404:

Moreover, if I use the images without JS but with css it works.

EDIT:

Thank you in advance for your answer.

Ysee

Answer 1

You have to rework your application build process. Obviously images have been revisioned, as bg15.jpg became bg15.284af477.jpg. But the step which replace the original image files in the application code with the revisioned image file is missing.

Let's assume you are using gulp, and image revisioning have been done with gulp-rev. You might want to look at gulp-rev-replace for rewriting occurences of revisioned assets.