Question

我在gitpages上有一个简单的图像查看器网页，但在我推送下一组图像之前，我想用角度将所有图像压缩成一个数组。

我在这里进行的测试只使用了与其他文件位于同一文件夹中的4张照片。（它们是jpeg）

我的js文件设置如下，带有阵列工厂和控制器。

angular.module('beamModule',[])
.factory('imageFactory', function(){
    return {
        getImages: function(){
        return ['beam1.jpg','beam2.jpg','beam3.jpg','beam4.jpg'];
        }
    }
})
.controller('Photos', function(imageFactory){
    this.images = imageFactory.getImages();
});

我不认为这个阵列有什么问题，但也许我忽略了什么？

我正在使用的HTML以及在检查开发人员工具时给我带来麻烦的部分如下所示。

<div class="imgcontainer" ng-controller="Photos as photosController">
    <img ng-repeat="src in photosController.images"
         ng-src="beamModule.js/{{images}}">
</div>

我不确定我是否应该在css中使用ng-class属性，或者是否还有其他东西需要删除？

开发人员工具为每个图像返回此值（它们重复只是不显示）

<img ng-repeat="src in photosController.images" class="ng-scope">

为什么要在此处放置ng-scope类并删除ng-src？

修改编辑

对于那么快速回答的人来说，这是真正的mvp。你说要改变ng-src =＆＃34; beamModule.js / {{images}}＆＃34;改为阅读{{src}}。

一旦我尝试了它它仍然没有工作，但后来我检查了开发工具，并注意到它试图从js文件而不是实际文件中提取文件所以我只是将其更改为此，现在它工作得很好！谢谢。

ng-src="{{src}}"

Answer 1

ng-src属性需要指向repeat而不是js文件。

NG-SRC =＆＃34; {{SRC}}＆＃34;

ng-src没有显示我的img数组

1 个答案: