为何require()函数不支持变量？Vue动态图片路径加载异常求助

这个问题我之前帮好几个开发者排查过，核心原因和Webpack（Vue CLI默认用它打包）的静态资源编译机制直接相关，我给你拆解清楚：

1. Webpack对require()的处理逻辑 #

Webpack是编译时打包工具，它在项目构建阶段会提前扫描代码里的require()调用，但只有当传入的是静态字符串路径时，它才能识别并处理对应的资源：

• 它会找到该路径下的图片文件，将其复制到打包后的静态资源目录，还会给文件名加上哈希值（用于缓存控制）。
• 最终把require('xxx')替换成处理后的资源URL。

但如果你传入的是变量（比如require(file.path)），Webpack在编译时根本不知道file.path具体是什么值，无法提前定位到对应的文件，自然会抛出Cannot find module "."的错误——因为它找不到一个叫“.”的模块（变量被编译时解析成了空占位符）。

2. 为什么硬编码字符串能生效 #

当你写require('./assets/avatar.png')这种静态路径时，Webpack能明确知道要处理哪个文件，在编译阶段就把这个图片纳入打包流程，生成正确的资源路径，运行时自然能正常加载。

3. 动态加载图片的可行方案 #

如果需要动态传入路径，你可以给Webpack一个“扫描范围”，让它提前打包指定目录下的所有符合规则的文件：

<!-- 假设你的图片都在src/assets/images目录下 -->
<img :src="require(`@/assets/images/${file.path}`)" />

这里的@是Vue CLI配置的src目录别名，Webpack会识别到@/assets/images/这个路径前缀，打包时会把该目录下所有文件都处理好，运行时就能根据变量找到对应的图片。

另外，如果你的图片是从后端接口获取的（或者不需要Webpack处理），可以把图片放在项目的public目录下，直接用绝对路径引用，不用require()：

<img :src="`/images/${file.path}`" />

public目录下的资源会被直接复制到打包后的根目录，不会经过Webpack的编译处理，所以可以直接通过URL访问。

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