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

回答

相關問題