如何使用 express 在 angular js 中显示图像

Question

嘿，我正在使用 angular-fullstack 生成器来创建我的网络应用程序。

现在我已经用这种方法上传了我的图片：我使用 ng-file-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);
            });
        });
    };

然后我编辑 routes.js 并添加：

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

所以 public 目录应该是静态的并且可以访问。

我尝试通过以下方式在视图中获取图像：

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

控制器：

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

控制台显示代码为 200 的请求：

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

但是浏览器不显示图片。

我的失败在哪里？你对我有什么提示吗？

也许还有另一种更好的方法来做到这一点？

提前致谢多米尼克

Answer 1

我使用延迟图像指令：

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);
        }
      };
    }]);

然后，在您的 html:

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

Answer 2

好的，我不知道为什么，但现在它似乎可以工作了。

我变了

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

至

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

现在，当我从保存的路径中删除 /public 部分时，我可以访问我的图像。

如何使用 express 在 angular js 中显示图像

How to show an image in angular js with express

angularjs

node.js

express

upload

angular-fullstack