Question

嘿我正在使用angular-fullstack生成器来创建我的webapp。

现在我用这种方法上传了我的图片：我使用ng-file-upload进行上传。

dummyFunc

我编辑我的routes.js并添加：

dummyFunc

因此公共目录应该是静态的，可访问的。

我尝试在视图中显示我的图片：

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

控制器：

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

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

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

但是浏览器没有显示图片。

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

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

提前致谢多米尼克

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 部分时，我可以访问我的图像。

如何用快速显示角度js中的图像

2 个答案: