Can't load static image file in angular template

Question

I am making a profile page and for some reason I can't load a static image on it. Here is my find function which looks for the image in the path '/uploads/profilePic/image_name.jpg' where this folder is inside my app folder. The path is stored but the image doesn't display

$scope.find = function(){
        $http.get('/profile/'+$stateParams.username).success(function(user){
            $scope.user = user;
            $scope.user.profileImage = '/uploads/profilePic/'+user.profilePic;
            console.log($scope);
        }).error(function(response){
            $scope.error = response.message;
        });
    };

My template

<img ng-src="{{profileImage}}" alt="temp" class="img-thumbnail"><hr>

ng-src should be user.profileImage

harishr
– harishr

2015-04-16 03:51:25 +00:00
Commented Apr 16, 2015 at 3:51 — harishr
– harishr, Commented Apr 16, 2015 at 3:51

nweg · Accepted Answer · 2015-04-16 03:38:52Z

1

Change your html to this:

<img ng-src="{{user.profileImage}}" alt="temp" class="img-thumbnail"><hr>

Your ng-src need to equal:

ng-src="{{user.profileImage}}"

Also, make sure your image is located where your path is pointing.

answered Apr 16, 2015 at 3:38

nweg

2,8753 gold badges25 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

jtand1 Over a year ago

how do we determine the path ? i keep getting localhost:3000/uploads/profilePic/default.png 404 (Not Found). My upload folder is in the same directory as the app

nweg Over a year ago

That tells me the value of $scope.user.profilePic is "default.png". You would have to have an image named default.png located in profilePic directory for this to work.

jtand1 Over a year ago

I have an image with that name in that directory but it doesn't load

nweg Over a year ago

If that's the case you should be able to just type that image url into your browser and it will pull up. If it doesn't pull up then your path is wrong. Angular isn't the problem at this point.

nweg Over a year ago

Is the image a png or jpg? In your question to reference a jpg image in your initial paragraph.

|

Collectives™ on Stack Overflow

Can't load static image file in angular template

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related