Errore 404 OTTIENI immagine quando uso AngularJS

Question

Sto programmando un sito Web personale con AngularJS (per il mio addestramento). Io uso il carosello da UI-Bootstrap come questo:

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

quando prova questo codice in locale funziona, ma quando ho caricato il sito web sul server, non funziona ... Ho un errore 404:

Inoltre, se uso le immagini senza JS ma con CSS funziona.

EDIT:

Grazie in anticipo per la risposta.

dell'YSEE

Answer 1

Devi rielaborare il processo di compilazione dell'applicazione. Ovviamente le immagini sono state revisionate, come bg15.jpg diventato bg15.284af477.jpg. Ma il passo che sostituisce i file di immagine originali nel codice dell'applicazione con il file di immagine revisionato manca.

Supponiamo che stiate utilizzando gulp e che la revisione dell'immagine sia stata eseguita con gulp-rev. Potresti voler dare un'occhiata a gulp-rev-replace per riscrivere le occorrenze delle risorse revisionate.