无法附加 AngularJS 数组

Question

我希望标题不要太混乱。

我的angular.js文件中有一个数组：

var app = angular.module('resume', []);
app.controller('resumeCtrl', function($scope, $document) {
  $scope.projects = [
    {
        title: 'TRU Colors Brewing Co.',
        image: 'images/tcb_screenshot.png',
        url: 'https://www.trucolors.co',
        category: ['development', 'design']
    },
    {
        title: 'JOMO',
        image: 'images/jomo_screenshot.png',
        url: 'https://jeffberlin.github.io/JOMO_website/index.html',
        category: 'development'
    }
];

在我的 HTML 文件中，我有：

<div class="row portfolio-preview">
  <div class="col-lg-4 text-center" ng-repeat="x in projects">
    <div class="projects tab-content active">
       <figure class="tab-pane">
         <a ng-href="{{x.url}}" target="_blank">
          <img class="img-fluid screenshot" ng-src="{{x.image}}">
         </a>                         
       </figure>
   <div class="description">
     <a href="" target="_blank">
      <h5>{{x.title}}</h5>
     </a>
   </div>
  </div>
</div>

现在我的问题是，我得到了正确数量的框来显示标题，但数组中没有其他显示/显示。作为参考，本节将在nav区域中有 3 个选项并将它们过滤掉(按category(，假设这是最好的做法。谁能看到我可能做错了什么？

显示的HTML代码是我至少能够通过使用x in projects和x.image，x.title等来显示titles的唯一方法。

PS-我对Angular很陌生，但感谢大家花时间提供帮助！

Answer 1

您需要提供图像文件夹的相对路径。路径需要相对于您的 html 文件所在的位置，以便浏览器知道在哪里正确查找。

在您的图片网址前面添加 ./。

$scope.projects = [
{
    title: 'TRU Colors Brewing Co.',
    image: './images/tcb_screenshot.png',
    url: 'https://www.trucolors.co',
    category: ['development', 'design']
},
{
    title: 'JOMO',
    image: './images/jomo_screenshot.png',
    url: 'https://jeffberlin.github.io/JOMO_website/index.html',
    category: 'development'
}

];

正如注释中指出的那样，您的CSS可能会导致图像被隐藏或没有宽度或高度。因此，在调试时不要忘记检查css。