Lỗi 404 GET Hình ảnh khi tôi sử dụng AngularJS

Question

Tôi đang lập trình một trang web cá nhân với AngularJS (để đào tạo của tôi). Tôi sử dụng Carousel từ UI-Bootstrap như thế này:

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

Khi tôi kiểm tra mã này trong địa phương nó hoạt động nhưng khi tôi tải lên các trang web trên máy chủ nó không hoạt động ... Tôi gặp lỗi 404:

Hơn nữa, nếu tôi sử dụng hình ảnh mà không JS nhưng với css nó hoạt động.

EDIT:

Cảm ơn bạn trước cho câu trả lời của bạn.

Ysee

Answer 1

Bạn phải làm lại quy trình tạo ứng dụng của mình. Rõ ràng hình ảnh đã được sửa đổi, vì bg15.jpg đã trở thành bg15.284af477.jpg. Nhưng bước mà thay thế các tệp hình ảnh gốc trong mã ứng dụng có tệp hình ảnh đã sửa đổi bị thiếu.

Giả sử bạn đang sử dụng gulp và sửa đổi hình ảnh đã được thực hiện với gulp-rev. Bạn có thể muốn xem gulp-rev-replace để viết lại các lần xuất hiện của các tài sản được sửa đổi.