Nuxt 2动态读取用户上传图片异常：本地正常VPS部署后404

一、VPS上图片路径404的核心解决步骤 #

1. 给Express添加上传目录的静态托管 #

如果你的multer上传目录不是Nuxt默认的static文件夹，Express必须单独配置静态资源托管，否则服务器无法对外暴露该目录下的文件。比如上传文件存在server/uploads，在Express路由里加：

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

// 配置后，可通过 http://你的域名/uploads/xxx.jpg 访问上传的图片
app.use('/uploads', express.static(path.join(__dirname, 'uploads')));

注意：必须用绝对路径，避免VPS上工作目录差异导致找不到文件。

2. 修复VPS上的文件权限 #

上传后的图片可能因为权限不足，导致Node/Nginx进程无法读取。执行以下命令修改：

# 递归开放目录读取权限
sudo chmod -R 755 /你的上传目录绝对路径
# 修改目录所属用户（用Nginx就改成www-data，用Node进程就改成当前运行用户）
sudo chown -R www-data:www-data /你的上传目录绝对路径

3. 对齐multer保存路径与访问路径 #

确保multer配置的保存路径和Express托管的访问路径对应。比如multer把文件存在server/uploads，Express托管/uploads对应这个目录，前端就统一用/uploads/xxx.jpg作为访问路径。

二、Nuxt 2动态读取图片的正确姿势 #

1. 不要往assets目录上传文件 #

assets是编译时处理的目录，动态上传的文件不会被Webpack解析，根本没法通过~assets/xxx访问。优先选static目录或者单独的上传文件夹。

2. 动态渲染图片的路径写法 #

• 如果上传到static/uploads：直接用/uploads/xxx.jpg（static下的文件会被Nuxt作为静态资源根目录）
• 如果用单独的上传目录：直接用Express托管的路径，示例代码：

<template>
  <img :src="`/uploads/${imageFileName}`" alt="用户上传图" />
</template>
<script>
export default {
  data() {
    return {
      imageFileName: 'user-avatar-123.jpg' // 从后端接口获取的文件名
    }
  }
}
</script>

3. 别用require加载动态图片 #

require只能加载编译时就存在的静态资源，动态上传的文件用这个方法会直接报错，直接写URL路径就行。

三、额外排查点 #

• 若用Nginx反向代理，要确保Nginx配置里转发了/uploads路径，或者直接让Nginx托管上传目录（性能更好）：

location /uploads {
    alias /你的上传目录绝对路径;
    expires 30d; # 设置缓存，优化访问速度
}

• 检查上传后的文件名是否包含特殊字符，避免URL编码问题导致404。

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