angular2 fetched img not rendering

我的问题是，我通过ng2-file-upload在前端上载多个图像，并在后端使用angular2和multer。上传文件后，响应对象保存在我的“产品”对象中，以清楚显示图像所属的产品。这工作得很好，并即时得到作为应答例如这样的：angular2 fetched img not rendering

destination 
 
: 
 
"/Applications/MAMP/htdocs/project/server/routes/../uploads" 
 
encoding 
 
: 
 
"7bit" 
 
fieldname 
 
: 
 
"productImage" 
 
filename 
 
: 
 
"1503791892150_BWbHb5s.jpg" 
 
mimetype 
 
: 
 
"image/jpeg" 
 
originalname 
 
: 
 
"BWbHb5s.jpg" 
 
path 
 
: 
 
"/Applications/MAMP/htdocs/ngStore/server/uploads/1503791892150_BWbHb5s.jpg" 
 
size 
 
: 
 
667147

现在，当我想angular2渲染这个形象，它不显示。当然在初始化林取的的数据。我有一个类别对象，它有一个嵌套的产品对象，这也嵌套图像对象，与multer的响应。

但是我想通过设置src属性的图像对象的路径字段来显示图像，但它不显示我的图像，allthough我可以看到的路径是正确的......

<img [attr.src]="prod.images[0].path" height="500" width="500">

任何人都可以帮助我吗？

来源

2017-08-27 b0ss

你在teamviewer中可用吗？需要调试 – Aravind

是的，我是。那很好，我怎样才能接触到你的电视数据？ – b0ss

没人能帮忙吗？ – b0ss

请尝试使用安全导航操作这样

<img [attr.src]="prod?.images[0]?.path" height="500" width="500">

查看加载的一段时间后，有时图像加载所以在这种情况下，这将工作。

来源

2017-08-27 10:36:15

无法正常工作。 Aravind调试了一下我的代码，发现它是一个安全问题。我的问题是我从我的节点服务器获得一个本地路径作为响应，即时通讯使用和因为我没有得到图像..所以也许更好的问题是我怎么能从遥控器的远程路径？或者有什么办法绕过角度的安全机制？ – b0ss

是的，很好，所以这意味着你需要在后端进行更改。 –

是的，但我真的不知道是什么...

这就是上传图像形式的阵列

var storage = multer.diskStorage({ 
 
     destination: function (request, file, callback) { 
 
      callback(null, __dirname + '/../uploads'); 
 
     }, 
 
     filename: function (request, file, callback) { 
 
      console.log(file); 
 
      callback(null, Date.now() + '_' + file.originalname) 
 
     }, 
 
     fileFilter: function (req, file, callback) { 
 
      var ext = path.extname(file.originalname) 
 
      if (ext !== '.png' && ext !== '.jpg' && ext !== '.gif' && ext !== '.jpeg') { 
 
       return callback(res.end('Only images are allowed'), null) 
 
      } 
 
      callback(null, true) 
 
     } 
 
    }); 
 

 
    var upload = multer({storage: storage}).any('productImages'); 
 

 
    router.post('/upload', function (req, res) { 
 
     upload(req, res, function (err) { 
 
      if (err) { 
 
       console.log(err); 
 
       res.send(err); 
 
       return; 
 
      } 
 
      res.send(req.files) 
 
     }); 
 
    });

的反应是后端侧和第一篇文章一样..那么我的错在哪里？

来源

2017-08-27 10:53:53 b0ss

angular2 fetched img not rendering

回答

相关问题