Angular8如何通过URL形式从数据库获取图片而非本地文件夹？

方案1：后端接口+HTTP缓存（最推荐） #

这是匹配你需求最直接的方案，既能保留<img src={{img.path}}>的原生写法，又能彻底解决重复传输浪费带宽的问题：

• 前端层面：无需修改HTML写法，将img.path设为后端图片接口的路径标识（比如图片在数据库的ID或唯一文件名），直接写 <img src="/api/images/{{img.path}}"> 即可。
• 后端层面：编写接口接收图片标识，从数据库读取对应的Blob数据，返回时设置HTTP缓存头，让浏览器自动完成缓存管理：
  • 设置 Cache-Control: public, max-age=86400（缓存1天，可根据业务调整时长）
  • 可选配置ETag或Last-Modified，实现协商缓存，当图片更新时自动失效旧缓存
• 示例后端代码（Node.js/Express）：

app.get('/api/images/:id', async (req, res) => {
  const imageId = req.params.id;
  // 从数据库查询图片Blob和MIME类型
  const image = await db.query('SELECT blob_data, content_type FROM images WHERE id = ?', [imageId]);
  
  // 设置缓存控制头
  res.setHeader('Cache-Control', 'public, max-age=86400');
  res.setHeader('Content-Type', image.content_type);
  
  // 返回图片Blob数据
  res.send(image.blob_data);
});

• Angular侧无需额外编写getImage这类方法，完全贴合你要的HTML写法，浏览器会自动处理缓存逻辑，重复请求直接读取本地缓存，不会消耗额外带宽。

方案2：Angular Service Worker+Cache API（进阶缓存控制） #

如果需要更灵活的缓存规则（比如离线可用、自定义缓存有效期），可以借助Angular的Service Worker实现：

1. 先在项目中启用Service Worker：ng add @angular/pwa
2. 在ngsw-config.json中添加图片接口的缓存策略：

{
  "dataGroups": [
    {
      "name": "images-cache",
      "urls": ["/api/images/**"],
      "cacheConfig": {
        "strategy": "freshness",
        "maxSize": 100,
        "maxAge": "7d",
        "timeout": "5s"
      }
    }
  ]
}

3. 前端依然沿用<img src="/api/images/{{img.path}}">的写法，Service Worker会自动拦截图片请求，将资源缓存到浏览器的Cache Storage中，下次请求优先从缓存获取，同时可配置后台同步更新逻辑。

方案3：懒加载+渐进式加载（优化大量图片体验） #

针对大量图片场景，结合上述缓存策略，再加上懒加载进一步降低初始带宽消耗：

• 使用Angular 14+提供的NgOptimizedImage指令，实现图片懒加载和渐进式加载：

<img ngSrc="/api/images/{{img.path}}" width="600" height="400" loading="lazy">

• 可搭配缩略图优化：后端新增/api/images/{{img.path}}/thumbnail接口返回低分辨率缩略图，前端先加载缩略图占位，再通过指令触发原图加载，同时缓存两者资源。

内容的提问来源于stack exchange，提问作者89barde