Question

您好我是角度js的新手，我正在使用的应用程序使用它。但我偶然发现了一个问题...（我主要是做html / css）在将图像添加到标记时，他们不会出现常规方式：

<img src="image/source/image.png"/>

所以我对控制器文件执行了以下操作：

  subscriptionControllers.controller('imagesController', function($scope) {
  $scope.image = [{
    src: 'image/source/image.png',
  }];
});

然后添加到html：

<img ng-src="{{image}}"/>

但仍然没有出现任何事情。

非常感谢您对此的任何帮助，谢谢！

编辑：

是图像存在，路径正确当我查看控制台时，它将图像显示为： image.png％22％7D] /订阅/图像

所以它将％22％7D添加到图像我不知道为什么，如果我点击控制台中的图像链接它会带我到404页面。

编辑：我不再认为这是问题所在，当我查看控制台并单击图像选项卡时，它会将图像显示为类型：html / text我不知道为什么会这样做，任何线索？

Answer 1

我可以看到你的图像模型是一个json对象的数组。如果是这样，请在访问图像模型时在视图中进行以下更改。

<img ng-src="{{image[0].src}}"/>

Answer 2

您可能在图像src中指定了错误的路径。您可以使用每个浏览器中提供的firebug或开发人员工具来检查图像是否已加载。

Answer 3

请确保您已经定义了ng-app和ng-controller，一切看起来都正确，在这里做了一个测试示例：

http://plnkr.co/edit/JnwCyEWT3KiZcsrSg6Ro?p=preview

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp" ng-controller="MyCtrl">
    <img src="https://www.google.com/images/srpr/logo11w.png"/>
    <img ng-src="{{image}}"/>
  </body>

</html>

JS

// Code goes here

angular.module("myApp", []).controller("MyCtrl", function($scope){
  $scope.image = "https://www.google.com/images/srpr/logo11w.png";

  })

Answer 4

使用此<img src="{{image[index].src}}"/>

看来你正在使用对象数组，所以在你的情况下＆＃34; index＆＃34;是要显示的对象索引。希望这会对你有所帮助。

使用Angular JS添加图像

4 个答案: