CODEWITHSUNDEEP
angularjshtml
Kalaiyarasi M
Kalaiyarasi M

Reputation: 93

How to show default image if profile image is not set in angularjs

I need to set a default image from my local file if profile pic is not set by user and how to set hover to it if the user moves the mouse close to the profile pic field to set the image.

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

Can anyone please help me.

Upvotes: 0

Views: 1219

Answers (2)

Piyush.kapoor
Piyush.kapoor

Reputation: 6803

Replace:

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

with:

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

Upvotes: 1

Mistalis
Mistalis

Reputation: 18309

To complete Piyush's answer, you can also do:

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

Upvotes: 0

Related Questions