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代码是我使用titles和x in projects，{{1}至少能够显示x.image的唯一方式等等。

P.S.-我对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。

无法附加AngularJS数组

1 个答案: