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+存储和访问动态图像库

回答

相关问题