Javascript 在使用Angular JS时，如何在ng repeat内的img标记中显示图像？

我的问题：

我想使用ng repeat指令显示本地存储的图像列表，但这些图像没有显示出来

AngularJS版本：1.2.22

代码：

• 目录结构：
  myapp/ |--- common/ | |--- images/ | |--- image.png | |--- subapp1/ | |--- index.html | |--- subapp1.js | | | |--- controllers/ | | |--- SubApp1Controller.js | | | |--- views/ | | |--- imageListView.html
  • SubApp1Controller.js

  功能子应用1控制器（$scope）
  {
  /**
  *私有方法：_run（）
  *Subapp1控制器的主要功能，其中所有的魔法
  *发生了。
  */
  函数_run（）{
  //此变量将定义将在图像列表视图上加载的样式
  $scope.section=“subapp1”；
  var成像源；
  imageSource=“../common/images/image.png”；
  //要在列表上显示的媒体元素列表
  $scope.mediaList=[
  {
  thumbnailPath:imageSource，
  imagePath:imageSource，
  },
  {
  thumbnailPath:imageSource，
  imagePath:imageSource，
  },
  {
  thumbnailPath:imageSource，
  imagePath:imageSource，
  },
  {
  thumbnailPath:imageSource，
  imagePath:imageSource，
  },
  {
  thumbnailPath:imageSource，
  imagePath:imageSource，
  },
  ];
  };
  //运行该类的主方法
  _run（）；
  }
  

  • imageListView.html
  额外信息：
  未加载图像，并且控制台中未打印错误消息
  我打开Web Inspector工具以查看li元素中处理了什么，但它没有src属性，请参见下面的内容：

  <li class="grid-item ng-scope" data-ng-repeat="media in mediaList">
          <img data-ng-src="../common/images/image.png" data-src="../common/images/image.png" />
  </li>
  

  <li class="grid-item" data-ng-repeat="media in mediaList">
      <img data-ng-src="{{media.thumbnailPath}}"
           data-src="{{media.imagePath}}"
           src="{{media.thumbnailPath}}"
      />
  </li>
  
  <!-- Error message printed in the console -->
  GET file:///[ABS_PATH]/%7B%7Bmedia.thumbnailPath%7D%7D net::ERR_FILE_NOT_FOUND 
  

  如果我在img元素中添加src属性，它将被加载，但我得到一个错误，请参见下面的内容：

  <li class="grid-item ng-scope" data-ng-repeat="media in mediaList">
          <img data-ng-src="../common/images/image.png" data-src="../common/images/image.png" />
  </li>
  

  <li class="grid-item" data-ng-repeat="media in mediaList">
      <img data-ng-src="{{media.thumbnailPath}}"
           data-src="{{media.imagePath}}"
           src="{{media.thumbnailPath}}"
      />
  </li>
  
  <!-- Error message printed in the console -->
  GET file:///[ABS_PATH]/%7B%7Bmedia.thumbnailPath%7D%7D net::ERR_FILE_NOT_FOUND 
  

  
  
  获取文件：///[ABS\u PATH]/%7B%7B媒体。缩略图路径%7D%7D网络：：找不到错误文件
  

  我读过很多关于类似问题的帖子和问答，但没有一篇对我有用。有人有线索吗

  ---

  提前感谢。
  对于IMG标签和AngularJS，只需使用ng src属性即可

  <img ng-src="{{media.imagePath}}" />
  

  ---

  {{media.imagePath}必须包含指向图像的绝对或相对URL。
  这可能是对srv进行角度清理的问题，默认情况下，考虑到

  文件：//

  协议不安全。尝试使用

  http[s]：//

  url，看看它是否有效。感谢您回答此问题。我不知道发生了什么，但它开始起作用了。我按照你的建议删除了数据前缀，重新加载了页面，它工作了，然后我再次添加了数据前缀，重新加载了页面，它仍然工作。这对我来说仍然是个谜，但它现在起作用了。关于数据前缀，我想用它来保持HTML5的有效代码。我认为最好只使用一个属性，不要混合使用数据ng src、ng src和src。