错误404我使用AngularJS时获取图像

Question

我正在使用AngularJS编写个人网站（我的培训）。我使用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则可以使用。

编辑：

提前感谢您的回答。

Ysee

Answer 1

您必须重新编写应用程序构建过程。显然，由于bg15.jpg成为bg15.284af477.jpg，因此图片已经过修订。但缺少 替换 应用程序代码中原始图像文件的步骤与修订后的图像文件。

我们假设您使用的是gulp，并且使用gulp-rev完成了图片修订。您可能希望查看gulp-rev-replace以重写已修订资产的出现次数。