Angular+Node.js从MySQL加载图片遇Chrome本地资源加载限制求助

问题核心 #

Chrome出于安全限制，禁止网页直接加载本地文件系统的file://协议资源。你的Node.js已将图片目录挂载为静态资源路由，但Angular端仍在生成本地assets路径，导致加载失败。

修正步骤 #

1. 确认Node.js静态资源配置（当前配置有效，可先验证）

你的Node.js代码已将本地图片目录映射为/images路由，这一步是正确的：

app.use('/images', express.static(path.join(__dirname, 'D:/Angular/project/src/assets/image/')));

可直接访问http://localhost:你的Node服务端口/images/目标图片名.jpg，测试是否能正常获取图片，确认静态资源服务运行正常。

2. 修改Angular端路径生成逻辑

将Angular中生成的本地assets/image路径，替换为Node.js静态资源的HTTP访问路径：

getAllData() {
    this.service.Newsformget().subscribe((res) => {
      console.log(res, 'res');
      // 替换为Node服务的实际地址，若Angular与Node同域名/端口可省略前缀
      const nodeServerUrl = 'http://localhost:3000'; // 改成你的Node服务真实地址
      this.readData = res.data.map((us: any) => {
        us.path = `${nodeServerUrl}/images/${us.path.split('/').pop()}`;
        return us;
      });
    });
  }

如果Angular构建后部署在Node服务下（同域名/端口），可简化为：

us.path = `/images/${us.path.split('/').pop()}`;

3. 处理跨域问题（若Angular与Node端口不同）

若Angular运行在4200端口、Node运行在3000端口，需在Node.js中配置CORS允许跨域请求：

const cors = require('cors');
// 全局允许所有来源跨域
app.use(cors());
// 或指定仅允许Angular所在域名访问
// app.use(cors({ origin: 'http://localhost:4200' }));

原理说明 #

通过Node.js静态资源服务器将本地图片转换为HTTP可访问资源，图片URL从本地文件路径变为http://xxx/images/xxx.jpg，符合Chrome的安全策略，即可正常加载。

内容的提问来源于stack exchange，提问作者Jay Mervana