2021-03-21

angular js在img标签中填写请求地址

1、错误写法

<!-- angular js中设置 testStr 的值 -->
<script>
		var app = angular.module('testapp', []);
		app.controller('testController', function($scope, $http) {
		
			$scope.testStr= "./test/test.img";
		
		});
			
</script>

<!-- img标签 -->
<img src="{{testStr}}">

直接填写图片地址无法访问到 testStr 所指向的地址

2、正确写法应使用ng-src代替src

<!-- img标签 -->
<img ng-src="{{testStr}}">

即使引号存在仍可以正确识别 testStr 所指向的地址

PS: 在 ng-src 属性下仍可以使用三目运算符进行逻辑判断

<script>
		var app = angular.module('testapp', []);
		app.controller('testController', function($scope, $http) {
		
			$scope.testItem= "man";
		
		});
			
</script>


<!-- 使用三目运算符进行逻辑判断 -->
<img ng-src="{{testItem == 'man' ? './img/man.svg' : './img/woman.svg'}}">