如何解决Neutralino加载外部图片404并使用应用外文件夹存储？

核心原因 #

Angular默认仅将项目内assets目录等配置好的路径作为静态资源服务范围，你的外部文件夹不在这个范围内，因此请求会返回404。

开发环境（ng serve）配置 #

直接修改angular.json，把外部文件夹添加到静态资源映射：

1. 找到architect -> build -> options -> assets数组，添加以下配置（替换../my-custom-data为你的实际外部文件夹路径）：

{
  "glob": "**/*",
  "input": "../my-custom-data",
  "output": "/my-custom-data/"
}

2. 同样在architect -> serve -> options -> assets里添加相同配置，确保开发服务器能识别该路径。
3. 重启ng serve，此时应用就能通过/my-custom-data/xxx.png访问外部文件夹里的图片。

如果不想复制外部文件到项目目录，也可以用自定义Express开发服务器托管外部文件夹：

• 编写简单的Express服务：

const express = require('express');
const app = express();
const path = require('path');
const { createProxyMiddleware } = require('http-proxy-middleware');

// 托管外部图片文件夹
app.use('/my-custom-data', express.static(path.join(__dirname, '../my-custom-data')));
// 代理Angular开发服务器
app.use('/*', createProxyMiddleware({ target: 'http://localhost:4200', changeOrigin: true }));

app.listen(3000);

• 启动该服务器后，访问http://localhost:3000即可正常加载外部图片。

生产环境部署配置 #

Nginx部署 #

在Nginx配置文件中添加location块映射外部文件夹：

server {
  listen 80;
  server_name your-domain.com;

  # 托管Angular打包后的dist文件夹
  root /path/to/your/angular/dist;
  index index.html;

  # 映射外部图片文件夹
  location /my-custom-data/ {
    root /path/to/your/external/folder;
    expires 30d; # 可选，设置缓存策略
  }

  # Angular单页应用路由 fallback
  location / {
    try_files $uri $uri/ /index.html;
  }
}

重启Nginx后，即可通过域名访问外部文件夹的图片。

Express/Node.js部署 #

托管Angular静态文件的同时，添加外部文件夹的静态托管：

const express = require('express');
const app = express();
const path = require('path');

// 托管外部图片文件夹
app.use('/my-custom-data', express.static(path.join(__dirname, '../my-custom-data')));
// 托管Angular打包后的文件
app.use(express.static(path.join(__dirname, './dist/your-app-name')));

// 单页应用路由 fallback
app.get('/*', (req, res) => {
  res.sendFile(path.join(__dirname, './dist/your-app-name/index.html'));
});

app.listen(8080);

注意事项 #

• 上传图片时，确保文件被正确写入目标外部文件夹，同时配置好服务器用户的读写权限。
• 前端引用图片时使用绝对路径/my-custom-data/xxx.png，避免相对路径引发的错误。

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