Vue3上传图片后动态渲染报错，刷新恢复的问题求助

核心原因 #

Webpack 对 require() 的解析是编译时静态扫描的，你上传的图片是运行时才生成并存入 @/assets 目录的，编译阶段 Webpack 根本不知道这些新文件的存在，所以路由跳转后调用 require(@/assets/${img}) 会触发“找不到模块”的错误。而强制刷新页面时，浏览器会直接向服务器请求该静态文件，此时服务器能正确返回，所以图片正常显示。

有效解决方案 #

方案1：将上传图片存到public静态目录（推荐） #

Vue 项目的 public 文件夹下的文件不会被 Webpack 编译，会直接作为静态资源被服务器托管，无需通过 require 解析：

1. 调整后端代码，将上传的图片存储到项目根目录的 public/images 文件夹（没有就新建）
2. 修改前端图片渲染代码，直接用绝对路径访问：

<img :src="`/images/${image}`" @error="imageLoadError" class="img-fluid" :alt="image" />

删除原来的 imageRoute 函数，不需要再用 require。

方案2：通过后端接口返回图片 #

如果不想改动存储目录，可以让后端提供一个图片读取接口，前端通过接口地址访问图片：

1. 后端新增接口（Express示例）：

const express = require('express');
const router = express.Router();
const path = require('path');

router.get('/api/images/:filename', (req, res) => {
  const filename = req.params.filename;
  const imagePath = path.join(__dirname, '../src/assets', filename);
  res.sendFile(imagePath);
});

module.exports = router;

2. 前端修改渲染代码：

<img :src="`${API_BACKEND_URL}/api/images/${image}`" @error="imageLoadError" class="img-fluid" :alt="image" />

为什么之前的尝试无效 #

• require.context 同样是编译时扫描指定目录生成映射，运行时新增的图片不会被加入到映射表中
• setTimeout 只是延迟执行逻辑，本质还是调用 require 加载编译时不存在的模块，无法解决核心问题
• 改用DIV展示或修改imageRoute返回值，都没改变“用编译时解析的require加载运行时文件”的本质

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