Ошибка 404 GET Image, когда я использую AngularJS

Question

Я программирую персональный сайт с AngularJS (для моего обучения). Я использую Carousel от UI-Bootstrap так:

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

Когда я проверить этот код в местных это работает, но когда я загрузить веб-сайт на сервере, то не работает ... У меня есть ошибка 404:

Кроме того, если я использую изображения без JS, но с css он работает.

EDIT:

Заранее спасибо за ответ.

Ysee

Answer 1

Вы должны переработать процесс сборки приложений. Очевидно, что изображения были отредактированы, так как bg15.jpg стал bg15.284af477.jpg. Но шаг, который заменить отсутствует исходный файл изображения в коде приложения с измененным файлом изображения.

Предположим, вы используете gulp, а просмотр изображений был выполнен с помощью gulp-rev. Возможно, вам стоит взглянуть на gulp-rev-replace на переписывание вступлений пересмотренных активов.