Vue.js访问Node.js服务端图片资源报404错误如何解决

• Node.js 服务监听 3000 端口，Vue.js 前端项目运行在 8080 端口
• 接口可正常返回 posts 集合数据，但图片资源访问返回 404
• 具体报错信息：GET http://localhost:3000/images/1656300140014picture.PNG 404 (Not Found)

前端渲染代码如下：

<tbody>
  <tr v-for="(item, index) in getAllPost" :key="item._id">
    <td>{{ index + 1 }}</td>
    <td>
      <img
        :src="'http://localhost:3000/images/' + item.postImage"
        style="width: 50px"
      />
    </td>
    <td v-if="item.author">{{ item.author.userName }}</td>
    <td v-if="item.author == null">N/A</td>
    <td>{{ item.title }}</td>
    <td class="text-right">
      <router-link
        :to="{ name: 'mainLayout' }"
        class="btn btn-primary mr-2"
      >
        <i class="fas fa-eye"></i>
      </router-link>
      <button class="btn btn-primary mr-2">
        <i class="fas fa-edit"></i>
      </button>
      <button class="btn btn-danger mr-2">
        <i class="fas fa-trash"></i>
      </button>
    </td>
  </tr>
</tbody>

该问题本质是 Node.js 服务端没有正确配置 /images 路由对应的静态资源托管规则，或静态资源路径映射、文件名匹配存在错误，导致服务找不到对应文件返回404。

1. 配置静态资源托管中间件
   如果使用 Express 框架，需通过 express.static 中间件注册静态资源路由，注意必须使用绝对路径映射，避免因服务启动目录不同导致路径失效：

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

// 将 /images 开头的请求映射到服务端本地的图片存储目录
// 示例中图片实际存放在项目根目录下的 public/images 文件夹，可根据你的实际存储路径修改
app.use('/images', express.static(path.join(__dirname, 'public/images')))

如果使用 Koa 框架，可搭配 koa-static 中间件实现相同逻辑：

const Koa = require('koa')
const serve = require('koa-static')
const path = require('path')
const app = new Koa()

app.use(serve(path.join(__dirname, 'public/images'), { prefix: '/images' }))

2. 校验文件匹配性

• 确认报错对应的文件 1656300140014picture.PNG 真实存在于上述配置的本地目录中
• 注意Linux系统文件名大小写敏感，需保证数据库中存储的 item.postImage 字段值和本地实际文件名完全一致，包括后缀名的大小写，避免出现实际文件是.png小写、请求路径传.PNG大写导致的404。

3. 重启 Node.js 服务后刷新前端页面，即可正常加载图片。

内容的提问来源于stack exchange，提问作者Md.Rokan Uzzaman