Angular 2+ 存储和访问动态图像库答案

【问题标题】：Angular 2+ store and access dynamic image libraryAngular 2+ 存储和访问动态图像库
【发布时间】：2017-12-23 20:55:33
【问题描述】：

我正在使用 Angular-cli 进行此构建，它将 src 文件夹下的所有文件夹编译到构建中。我将图像存储在 src 下的 assets 文件夹中：

src |-app |-assets |-img_library

我像这样动态访问它们： <img src="assets/img_library/{{imgId}}"

不幸的是，这个文件夹被 angular-cli 编译到构建中，所以每次添加图像时我都必须重新构建应用程序，以便客户端能够访问它。

我还构建了服务器，因此我可以将图像存储在任何我想要的位置，但我不知道如何通过img 标签访问src 上方的文件夹。

有没有办法在 Angular 中使用图像标签访问 src 文件夹上方的 public/assets 文件夹？

【问题讨论】：

这没有意义 - 如果您访问 src/ 之外的资产文件夹，您仍然必须包含它并在添加图像时重新构建。相反，拆分应用程序 - 拥有一个简单的 API 或返回链接列表的东西，然后它们可以在任何地方（同一台服务器、另一台服务器、S3、CDN 等）存在。跨度>
如果有办法访问存储在我的 src 文件夹上方的文件夹，我就不必重新构建，因为它不会被编译到构建中。构建 api 以通过图像标签访问图像，就像使用推土机推倒蚁丘一样。这就是为什么在传统的 Web 开发中，您会有一个公用文件夹来保存这些资产。
它没有被编译到构建中是一个问题，而不是一个解决方案。部署时如何确保它位于正确的位置？该应用如何发现图像？
与我通过 api 访问它的方式相同，通过了解文件夹结构并在指定路径请求图像。同样，我只是询问是否有一种方法可以让 Angular 中使用的图像标签访问作为 src 文件夹同级的文件夹。如果没有，我将开始编写一个 http.get 请求来提取我需要的图像。这似乎是一个普遍的要求。许多应用需要解决存储用户媒体的问题。

标签： image angular build assets

【解决方案1】：

@jonrsharpe 你说得对，这没有任何意义。 assets 文件夹用于存放大多数用户经常使用的图像/媒体。我不知道我在想什么，当我需要从后端接近它时，我的大脑陷入了 Angular 模式。

我使用了一个 express 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'> 的获取请求。

希望这对其他睡眠不足的开发者有所帮助。

【讨论】：