How to show an image in angular js with express

Question

Hey I am using the angular-fullstack generator to create my webapp.

Now I had uploaded my images with this method: I used ng-file-upload for the upload.

//server/picture.contoller.js
    exports.upload = function (req, res) {
        //Crate Picture on db
        Picture.create(req.body, function (err, picture) {
            if (err) {
                return handleError(res, err);
            }
            var newPath = appRoot + "/public/uploads/img";
            var filePath = newPath + '/' + picture._id;
            var fileName = req.files.file.name;
            var extension = '.' + fileName.substr((~-fileName.lastIndexOf(".") >>> 0) + 2);
            filePath = filePath + extension;
            var serverPath = '/public/uploads/img/' + picture._id+extension;
            console.log(' Name:' + filePath);
            fs.readFile(req.files.file.path, function (err, data) {
                if (err) {
                    return handleError(res, err);
                }
                fs.writeFile(filePath, data, function (err) {
                    if (err) {
                        return handleError(res, err);
                    }

                });
            });
            Picture.findById(picture._id, function (err, pictureToUpdate) {
                if (err) {
                    return handleError(res, err);
                }
                if (!pictureToUpdate) {
                    return res.status(404).send('Not Found');
                }
                console.log("Picture to update: " + pictureToUpdate);
                var updated = _.extend(pictureToUpdate, {path: serverPath});
                updated.save(function (err) {
                    console.log('Picture after update: ' + updated);
                    if (err) {
                        return handleError(res, err);
                    }
                });
                return res.status(201);
            });
        });
    };

And I edit my routes.js and add:

app.use('/public', express.static(__dirname + '/public'));

So the public directory should be static an access able.

I try to get my images in the view with:

<div class="row" ng-repeat="picture in images">
            <div class="col-md-4"><img ng-src="{{picture.path}}"></div>
            <div class="col-md-4"><label><b>Titel:</b>{{picture.title}}</label><br><label><b>Größe</b>(BxH)<b>:</b> {{picture.width}}x{{picture.height}}</label></div>
        </div>

Controller:

 $http.get('/api/pictures').success(function (data) {
          $scope.images = data;
        });

The console shows up the request with code 200:

> GET /api/pictures 304 5ms GET
> /public/uploads/img/566716a19646eb3a214977e3.jpg 200 7ms

But the browser don't show the picture.

Where is my failure ? Do you have any hint for me ?

Maybe there is another better way to do this ?

Thanks in advance Dominic

score 0 · Answer 1 · answered Dec 08 '15 at 19:00

I use a delayed image directive:

angular.module('common')
    .directive('azLater', ['$timeout', function ($timeout) {
      return {
        restrict: 'A',
        replace: true,
        template: '<img />',
        scope: {
          later: '=azLater'
        },
        link: function (scope, element, attrs) {
          element[0].src = '/res/missing_photo.jpg';//missing...
          $timeout(function () {
            var src = scope.later;

            if (src) {
              element[0].src = src;
            }

          }, 100);
        }
      };
    }]);

and then, in your html:

<div class="row" ng-repeat="picture in images">
        <div class="col-md-4"><img az-later="picture.path"></div>
</div>

I added this but this doesn't helped me – dominic Dec 09 '15 at 16:03 — dominic, Dec 09 '15 at 16:03

score 0 · Accepted Answer · answered Dec 09 '15 at 16:07

0

Ok I don't know why but now it seems to work.

I changed

app.use('/public', express.static(__dirname + '/public'));

to

app.use( express.static(__dirname + '/public'));

and now I can access my images when I remove the /public part from my saved path.

answered Dec 09 '15 at 16:07

dominic

385
1
6
23

That's how Express' static works. Maps to root by default. For example, my '/res/missing_photo.jpg' from above is actually in myAppRoot/public/res/missing_photo.jpg – malix Dec 10 '15 at 16:28

How to show an image in angular js with express

2 Answers2