javascript - 使用 AngularJS 获取图像时出现错误 404

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 的图像，它就可以工作。

编辑:

预先感谢您的回答。

是的

Answer 1

您必须重新设计您的应用程序构建过程。显然图像已经被修改，因为 bg15.jpg 变成了 bg15.284af477.jpg。但是应用程序代码中缺少用修改后的图像文件替换原始图像文件的步骤。

假设您正在使用 gulp，并且已使用 gulp-rev 完成图像修改.你可能想看看 gulp-rev-replace用于重写修改后的 Assets 。