ng-src 不显示图像 - AngularJS

Question

我正在尝试 ng-repeat 一组图像路径，但图像未加载。 ng-src 和 src 都试过了，都不行。

HTML 文件：

<div ng-app="homeIndexApp">
    <div ng-controller="homeIndexController">
        <div ng-repeat="x in pics">
             <img ng-src="{{x.source}}">
        </div>
    </div>
</div>

js 文件：

var homeIndex = angular.module('homeIndexApp', []);

homeIndex.controller('homeIndexController', function ($scope) {
    $scope.pics = [{ source: 'images/slides/Slide4.png' },
        { source: 'images/slides/Slide5.png' },
        { source: 'images/slides/Slide1.png' },
        { source: 'images/slides/Slide2.png' },
        { source: 'images/slides/Slide3.png' }
    ];
});

但是，当我在浏览器中检查元素时，我可以将鼠标悬停在 src 标记上并查看图像缩略图：

<img ng-src="images/slides/Slide4.png" src="images/slides/Slide4.png">

文件夹设置：ASP.NET Core MVC

为什么他们没有出现在网站上？代码有什么问题？

Answer 1

在这个例子中工作正常：

var homeIndex = angular.module('homeIndexApp', []);

homeIndex.controller('homeIndexController', function ($scope) {
    $scope.pics = [
        { source: '//i.imgur.com/vM1snTA.jpg' },
        { source: '//i.imgur.com/OB2vpNi.jpg' },
    ];
});

<script src="//unpkg.com/angular/angular.js"></script>
<div ng-app="homeIndexApp">
    <div ng-controller="homeIndexController">
        <div ng-repeat="x in pics">
             <img ng-src="{{x.source}}" height=100>
        </div>
    </div>
</div>