如何在html(angularjs)中动态显示图像

时间:2016-12-27 12:48:28

标签: javascript html angularjs src

 src={{logo}}

var logo = 'localhost:3000/modules/images/default.png'

我正在动态地显示图像路径,但它没有在html中显示路径, 我是否需要为src使用引号?任何人都可以帮助我。

3 个答案:

答案 0 :(得分:7)

使用ng-src

<img ng-src="{{logoUrl}}">

这为您提供了预期的结果,因为 phone.imageUrl在角度加载后被评估并替换为其值

<img src="{{logoUrl}}">

但是有了这个,浏览器会尝试加载名为{{phone.imageUrl}}的图像,这会导致请求失败。您可以在浏览器的控制台中查看此内容。

&#13;
&#13;
var app=angular.module("myApp",[]);
app.controller('myCtrl',function($scope){
  $scope.logo='https://angularjs.org/img/AngularJS-large.png';
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div>
    <img ng-src="{{logo}}" />
  </div>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

<img ng-src={{logo}}/>

$scope.logo = 'localhost:3000/modules/images/default.png'

答案 2 :(得分:0)

只需使用ng-src ..

body{
  display: inline-flex;
}