加载本地图片抛出 404 Not Found (AngularJS, JavaScript)答案

【问题标题】：Loading local pictures throws 404 Not Found (AngularJS, JavaScript)加载本地图片抛出 404 Not Found (AngularJS, JavaScript)
【发布时间】：2017-04-28 19:22:52
【问题描述】：

我是 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>

加载图片需要做些什么改变？提前谢谢！

【问题讨论】：

url: img[i], 将其更改为 url: img[i].url, 或者更好的方法是将 var img 更改为字符串数组而不是对象
在您的图片网址前添加“/”可能会有所帮助
感谢 George 和 Thennarasan 的超快速响应和解释 - 问题已解决。 Ahefaz：也谢谢你！

标签： javascript angularjs

【解决方案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"];

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

【讨论】：

【解决方案2】：

目前附加为“http://localhost:9000/{"url":"images/foopic.png"}"。

下面改一下

 $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]
        });
    };

修改后会追加为“http://localhost:9000/images/foopic.png”。

【讨论】：