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

【问题标题】：How to show image dynamycally in html(angularjs)如何在 html(angularjs) 中动态显示图像
【发布时间】：2017-05-11 18:17:06
【问题描述】：

 src={{logo}}

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

我正在动态显示图像路径，但它没有在 html 中显示路径，我需要为 src 使用引号吗？谁能帮帮我。

【问题讨论】：

引用：-
Fig.1 - A挪威讲坛岩石的景色。

标签： javascript html angularjs src

【解决方案1】：

使用ng-src

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

这会为您提供预期的结果，因为 在加载 angular 后会评估并替换为它的值。

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

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

var app=angular.module("myApp",[]);
app.controller('myCtrl',function($scope){
  $scope.logo='https://angularjs.org/img/AngularJS-large.png';
});

<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>

【讨论】：

我没有得到使用上述代码显示的图像。
@nlr_p 是 localhost URL（只能从您的系统访问）。我添加了其他可访问的 URL。请检查
@nir_p 可以在代码 sn -p 中查看输出。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

只需使用 ng-src..

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

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

【讨论】：