Angular中上传图片后刷新页面无法显示，报404错误求助

看起来你遇到的是「上传后能正常预览，但刷新就找不到图片」的典型问题，我帮你梳理几个最可能的原因和对应的解决办法：

1. 前端用了临时Blob URL，刷新后失效 #

如果上传图片时，你是通过URL.createObjectURL()生成临时链接来展示图片的，那这个链接只在当前浏览器会话有效，刷新页面后就会失效，自然返回404。

解决办法：

• 上传完成后，让后端返回图片的实际存储路径（比如/uploads/20240520/abc123.jpg）
• 把showChildThumb替换成这个后端返回的路径，而不是临时Blob URL。比如：

  // 假设上传接口返回的数据里包含imgUrl字段
  this.uploadService.uploadImage(file).subscribe(res => {
    this.showChildThumb = res.imgUrl; // 用后端返回的真实路径替换临时URL
  });
  

2. 服务器未正确托管静态资源目录 #

如果图片已经成功存在服务器的某个文件夹（比如uploads），但后端没有把这个文件夹配置为静态资源目录，那么浏览器请求图片路径时，服务器不知道要从这个文件夹里找文件，就会返回404。

举几个常见后端的配置例子：

• Node.js/Express：

  const express = require('express');
  const app = express();
  // 把uploads文件夹设置为静态资源目录，前端可以通过/uploads/xxx.jpg访问
  app.use('/uploads', express.static('uploads'));
  

• Spring Boot：
  在application.properties里添加：

  spring.web.resources.static-locations=classpath:/static/,file:./uploads/
  

3. 路径拼接或大小写问题 #

检查你拼接的图片URL是否和实际存储路径一致：

• 比如你的config.uploadFolder是/uploads/，但实际服务器存储的路径是/static/uploads/，导致路径少了前缀
• 如果服务器是Linux系统，注意路径大小写（比如前端用/Uploads/，实际存储是/uploads/，Linux区分大小写会找不到）

最后验证步骤 #

1. 上传图片后，先确认服务器的目标文件夹里确实存在这张图片
2. 打开浏览器控制台，看刷新后请求图片的URL是什么，复制这个URL直接在地址栏访问，看是否能打开
3. 如果直接访问也404，说明是服务器静态资源配置或路径问题；如果能打开，那就是前端的URL拼接或状态保存问题（比如刷新后showChildThumb又变回了默认图，没从后端重新获取）

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