Wie wird das Standardbild angezeigt, wenn das Profilbild nicht in angularjs eingestellt ist?

Question

Ich muss ein Standardbild aus meiner lokalen Datei erstellen, wenn das Profilbild nicht vom Benutzer festgelegt wurde und wie man den Mauszeiger darauf setzt, wenn der Benutzer die Maus bewegt das Profilbildfeld zum Einstellen des Bildes.

Mein HTML:

<div class="col-lg-2 vheight1"> 
        <h4>Profile Picture</h4> 
        <div class="fileinput fileinput-new" onclick='$("#my_profile_pic").click();'> 
         <div class="fileinput-preview thumbnail" data-provides="fileinput" data-trigger="fileinput" id="profile_pic"> 
          <img ng-if="source" class="thumb" ng-src="{{source}}"/> 
         </div> 
         <!-- <div class="hidden-sm hidden-md hidden-lg hidden-xs"> 
         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
          <span> 
           <span class="fileinput-new" ng-show="!hasFile()">Select image</span> 
           <span class="fileinput-new" ng-show="hasFile()">Change</span> 
          </span> 
          <a href="#" class="btn btn-danger fileinput-new glyphicon glyphicon-trash" data-dismiss="fileinput" ng-show="hasFile()" ng-click="removefile(json, file)" ></a> 
         </div> --> 
        </div> 
       </div> 
       <input type="file" class="hidden hidden-sm hidden-md hidden-lg hidden-xs" id='my_profile_pic' file-model="photo"> 

Kann jemand mir bitte helfen.

Answer 1

ersetzen:

<img ng-if="source" class="thumb" ng-src="{{source}}"/> 

mit:

<img class="thumb" ng-src="{{source ? source : 'pathtodefault.png'}}"/> 

Answer 2

Piyush's answer zu vervollständigen, können Sie auch tun:

<img class="thumb" ng-show="source" ng-src="{{source}}"/> 
<img class="thumb" ng-show="!source" src="defaultSrc"/>