Question

我是AngularJS（和JavaScript）的新手，非常感谢您的放纵。我正在努力将本地图像加载到网格状结构中，接收请求“http://localhost:9000/ {”url“：”images / foopic.png“}”的状态代码404 Not Found。

控制器：

angular.module('FooApp')
    .controller('FooCtrl', function ($scope) {

        var pictures = $scope.pictures = [];

        var img = [{
            url: "images/foopic1.png"
        }, {
            url: "images/foopic2.png"
        }, {
            url: "images/foopic3.png"
        }, {
            url: "images/foopic4.png"
        }, {
            url: "images/foopic5.png"
        }, {
            url: "images/foopic6.png"
        }];

        var titles = ["Foo Pic1", "Foo Pic2", "Foo Pic3", "Foo Pic4", "Foo Pic5", "Foo Pic6"];

        var dummyText = ["Lorem ipsum dolor sit amet, consectetur adipiscing    elit.", "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", "Lorem ipsum dolor sit amet, consectetur adipiscing elit."];

        $scope.addPics = function (i) {
            pictures.push({
                title: titles[i],
                url: img[i],
                summary: dummyText[i]
            });
        };

        for (var i = 0; i < 5; i++) {
            $scope.addPics(i);
        }

    });

观点：

<h1>Overfoo</h1>
<div class="thumbnails">
    <div class="col-md-4" ng-repeat="pic in pictures">
        <img ng-src="{{pic.url}}">

        <h3>{{pic.title}}</h3>
        <p> {{pic.summary}}</p>
    </div>
</div>

加载图片需要更改什么？提前谢谢！

Answer 1

问题出在这一行

url: img[i]

您将该对象上的url设置为等于另一个对象而不是字符串，因为

img[i] == {url: "images/foopic1.png"}

因此，要么将url: img[i]更改为url: img[i].url 或，请将img数组更改为字符串而不是对象，如下所示：

var img = ["images/foopic1.png", "images/foopic2.png", "images/foopic3.png", "images/foopic4.png", "images/foopic5.png", "images/foopic6.png"];

就个人而言，我会选择将数组更改为字符串，因为您没有在数组中的对象上存储任何其他信息。

Answer 2

它目前附加为＆＃34; http://localhost:9000/ {＆＃34; url＆＃34;：＆＃34; images / foopic.png＆＃34;}＆＃34;。

更改以下

 $scope.addPics = function (i) {
        pictures.push({
            title: titles[i],
            url: img[i],
            summary: dummyText[i]
        });
    };

到

 $scope.addPics = function (i) {
        pictures.push({
            title: titles[i],
            url: img[i].url,
            summary: dummyText[i]
        });
    };

修改后，它会附加为＆＃34; http://localhost:9000/images/foopic.png＆＃34;。

加载本地图片会抛出404 Not Found（AngularJS，JavaScript）

2 个答案: