404 GET Image Error when I use AngularJS

Question

I am programming a personal website with AngularJS (for my training). I am using UI-Bootstrap Carousel as follows:

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 locally, it works, but when I upload the website to the server, it does not work ... I have 404 error:

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

EDIT:

Thank you in advance for your reply.

Ysee

Answer 1

You need to redesign the application build process. Obviously, the images were revised since bg15.jpg became bg15.284af477.jpg . But there is no step to replace the original image files in the application code with the modified image file.

Suppose you are using gulp and image processing is done using gulp-rev . You might want to look at gulp-rev-replace to rewrite entries of revised assets.