javascript - Load image from potentially-null interpolated URL values in AngularJS -

i trying load image 2 different scope variables values follows:

$scope.image.baseurl = "http://localhost/myapp/public/"; $scope.image.relativeurl = "app/images/template/001/section.png"; 

the values dynamically loaded, , undefined. in case either value undefined, no image should loaded.

1. consider following example:

   <img ng-src="{{image.baseurl + image.relativeurl}}"/> 

   this doesn't work. in case, if relativeurl undefined, resolves first scope variable value , tries access baseurl value. console error 400 status code due request http://localhost/myapp/public/.

2. consider following example:

   <img src="{{image.baseurl + image.relativeurl}}"/> 

   this doesn't work, either. in case, compiler not able resolve scope variables until angular loads, url curly braces used make request. console error 400 status code due request http://localhost/myapp/public/image.baseurl%20+%20image.relativeurl.

3. another question recommended use function on scope, this:

   <img ng-src="getimageurl()"/> $scope.getimageurl = function() { return $scope.baseurl + $scope.relativeurl} 

   this still doesn't work because same error, time request http://localhost/myapp/public/getimageurl().

what can achieve this?

the ngsrc directive has 2 capabilities:

1. obviously, core functionality simple: waits angular load, performs interpolation on attribute value , sets src attribute result.
2. a lesser-known feature if any angular interpolation expression evaluates undefined, no src attribute generated. this behavior present in versions 1.3 , greater.

therefore, seem example using {{image.baseurl + image.relativeurl}} work intended, doesn't. why?

well, key in order angular expression "short circuit" , ignored, whole expression must evaluate undefined. if baseurl defined, relativeurl isn't, result string "undefined" concatenated onto end of baseurl. obviously, string not undefined, angular render src attribute.

fortunately, easy fix: instead of doing string concatenation within expression, use 2 expressions.

angular.module('sample', [])    .controller('samplecontroller', ['$scope', function ($scope) {      $scope.image = {        baseurl: 'https://example.com/',        relativeurl: undefined      };    }]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.js"></script>  <div ng-app="sample" ng-controller="samplecontroller">    <img ng-src="{{image.baseurl}}{{image.relativeurl}}">  </div>

notice no src attribute created!

however, true sometimes, amount of processing need within angular expressions heavy. in case, can use function, take advantage of behavior, must return undefined if don't want src attribute appear.

angular.module('sample', [])    .controller('samplecontroller', ['$scope', function ($scope) {      var image = {        baseurl: 'https://example.com/',        relativeurl: undefined      };      $scope.fullurl = function () {        if (image.baseurl && image.relativeurl) {          return image.baseurl + image.relativeurl;        }      };    }]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.js"></script>  <div ng-app="sample" ng-controller="samplecontroller">    <img ng-src="{{fullurl()}}">  </div>

when branch isn't taken, function doesn't explicitly return, evaluate undefined, , angular not create src attribute.