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

Question

我正在使用AngularJS编写一个个人网站(我的培训).我使用UI-Bootstrap中的Carousel,如下所示:

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-revgulp完成。您可能需要查看gulp-rev-replace来重写修订资产的情况。