Angular 2+存儲和訪問動態圖像庫

我正在使用Angular-cli編譯此版本，並將src文件夾下的所有文件夾編譯到版本中。我src下存儲資產文件夾圖片：Angular 2+存儲和訪問動態圖像庫

src |-app |-assets |-img_library

我動態地訪問他們像這樣： <img src="assets/img_library/{{imgId}}"

不幸的是這個文件夾中得到由角CLI編譯到構建，所以我會每次添加圖像以使客戶端能夠訪問它時，必須重新構建應用程序。

我建立了服務器，所以我可以將圖像存儲到任何地方，但我不知道如何通過img標籤訪問src上方的文件夾。

有沒有辦法在Angular中使用圖片標籤訪問src文件夾上方的公共/資產文件夾？

2017-07-18 Nayfin

這沒有任何意義 - 如果您訪問src /'之外的資產文件夾，您仍然*必須在添加圖像時包含它並重建。相反，應用程序分開 - 有一個簡單的API或返回一個鏈接列表，然後他們可以在任何地方*（同一臺服務器，另一臺服務器，S3，CDN，...）生活。 – jonrsharpe

如果有一種方法可以訪問存儲在我的src文件夾上的文件夾，我不必重新編譯，因爲它不會被編譯到構建中。通過圖像標籤構建api以訪問圖像，似乎使用推土機來敲打螞蟻山。這就是爲什麼在傳統的Web開發中，您將擁有一個公用文件夾來保存這些資產。 – Nayfin

未編譯到構建中是*問題*，而不是解決方案。在部署時如何確保它在正確的位置？該應用如何發現圖像？ – jonrsharpe

@jonrsharpe你說得對，這沒有任何意義。資產文件夾適用於大多數用戶經常使用的圖像/媒體。我不知道我在想什麼，當我需要從後端接近它時，我的大腦陷入了Angular模式。

我用了一個明確的API：

router.get('/some/api/:id/img.png', function(req, res, next){ 

    var id = req.params.id, 
     filePath = 'img.png', 
     root = __dirname + '/some/location/' + id +'/'; 

    var options = { 
     root: root, 
     dotfiles: 'deny', 
     headers: { 
      'x-timestamp': Date.now(), 
      'x-sent': true 
     } 
    }; 

    res.sendFile(filePath, options, (err) => { 
     if (err) { 
      next(err); 
     } else { 
      console.log('Sent:', filePath); 
     } 
    }); 
})

從<img src='some/api/{{imageId}}/img.png'>於獲取請求作出迴應。

希望這可以幫助一些其他睡眠不足的開發者。

來源

2017-07-19 02:59:32 Nayfin

Angular 2+存儲和訪問動態圖像庫

回答

相關問題