vue：使用require动态加载本地图片报错找不到模块

最新推荐文章于 2025-03-24 15:01:43 发布

JuS巨山超力霸

最新推荐文章于 2025-03-24 15:01:43 发布

阅读量3.4k

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/m0_49623851/article/details/127268030

版权

本文解决Vue项目中使用require动态加载图片路径的问题。当尝试通过变量动态设置图片路径时，Webpack无法解析未知变量路径，导致加载失败。文章提供了解决方案，即结合静态路径与变量来确定图片文件名。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：vue中使用require加载动态路径报错

 <van-image
   v-if="idx <= 2"
   width="24"
   height="24"
   :src="require(img[idx])"
 />
<!-- :src="require('../assets/rank1.png')"  -->
<!-- :src="require('../assets/' + 'rank' + (idx+1) + '.png')" -->

原因：首先需要考虑是不是图片路径的问题，直接写入静态地址:src="require('../assets/rank1.png')"是没有问题的，所以问题在于require和动态路径的使用。因为 webpack本身是一个预编译的打包工具，无法预测未知变量路径，所以不能require纯变量路径。

解决办法：前置地址必须是静态地址 + 变量提供图片名称

:src="require('../assets/' + 'rank' + (idx+1) + '.png')"

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

JuS巨山超力霸

关注关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue - electron 报错 Unable to load preload script: “x“ | Error: require() of ES Module “x“ not support

高级前端工程师

05-09

3683

vue，electron，preload.js，CommonJS，vue electron报错，将Electron项目原CommonJS语法改成使用ES 模块（ESM）语法，preload.js一直加载不到，报错，Electron项目中将CommonJS改成使用ES 模块（ESM）语法preload.js加载报错，详细解决方案，Unable to load preload script，Error: require() of ES Module "x" not support. Instead change

Vue项目中使用require的方式导入图片资源，本地运行无法打开的问题

qq_41373791的博客

10-24

889

无意中发现，项目中一个require导入的图片图标，在file协议下居然可以正常显示，然后就比对了一下不同之处，发现这个图标图片打包的时候被编译成了base64了。于是就查了base64图片的特殊之处，查找得知base64格式的图片是不需要发请求获取的（一般是减少页面请求优化的手段之一，但是存在会使图片体积增加的问题）。其中有一块需要展示一个拓扑图，绘制拓扑图时用了定义了一个图片节点，然后图片的导入方式是 require的方式，然后本地npm run dev启动的时候可以正常显示，没有任何问题。

参与评论您还未登录，请先登录后发表或查看评论

vue | require动态加载图片及遇到的报错

weixin_44864257的博客

04-26

2056

2. require不能用纯动态地址，必须要有图片的路径+名称+后缀。2. 视图加载的时候未拿到数据，可以用v-if判断一下。（require是node用来加载并执行其它文件导出的模块的方法。结果图片无法显示，遇到了以下提示，而且获取图片名字还需要截取。使用require将url转为base64。1. 查看图片路径是否写错。在弹窗用以上操作的时候出现以下报错。1. 把图片数组改为图片名字。

Vue3+vite项目使用require 解决 ReferenceError: require is not defined 报错问题

蓝胖子的博客

03-24

1185

Vue3+vite项目使用require 解决 ReferenceError: require is not defined 报错问题

vue 前端 require动态引入图片报错Error: Cannot find ‘@/static/image/xxx.png‘

GoAyano的博客

12-30

3550

vue 前端 require动态引入图片报错Error: Cannot find '@/static/image/xxx.png'

vue require动态路径图片报错_前端Vue开发趟过的坑

weixin_39717110的博客

12-12

888

1.vue脚手架项目中,动态加载图片,必须通过 require的方式引入,直接使用路径获取不到图片.imgs: require('../assets/imgs/Dfv6Z1jNUpkSdQEfjU40.png')2.vuex中,mutations中的方法不能通过return获取到值....

require(‘inquirer‘)报错

qq_42460322的博客

10-27

2189

nodejs require('inquirer') 报错解决

vue3报错5 vue中用require处理图片地址 can‘t find module ‘...png/jpg‘

yangyangdt的博客

01-12

1605

vue3中图片绑定src直接渲染字符串地址，会报错can't find module 'jpg/png',需要用require。

vue 引入图片的问题

全网同名：PBitW！可以去掘金关注我！

05-15

1849

为什么使用require 自己讲解实例 - src下 - img 验证实例 - public下 - 绝对路径 - img 报错，其中 imgurl5、imgurl6 找不到资源！去掉 imgurl5、imgurl6 再次运行（开发环境）：去掉 imgurl5、imgurl6 再次运行（生产环境）：发现 /static 这种写法生产环境并不正确实例 - public下 - 相对路径 - img 结论实例 - public下 - 背景报错 bg2 的图片找不到去掉 bg2 再次运行（开发环境）

vue3报错找不到模块vite

热门推荐

cxx4220的博客

12-24

1万+

正常在<img>标签加载图片的方式是 <img src="../assets/product2.jpg" alt=""> 但是在vue中动态加载图片，直接用src是无效的，需要使用v-bind动态加载 <img :src="product.imgSrc" alt=""> //正确 <img :src="../assets/product2.jpg...

前端VUE2使用require请求图片资源，如找不到图片html页面直接报错的处理

m0_70547044的博客

06-13

1407

1 、getImg()为获取图片地址的方法，在标签中直接引用。2、methods里面定义方法getImg()

【vue项目开发遇到的问题】在vue3中引入图片报错 Uncaught (in promise) ReferenceError: require is not defined

m0_69892739的博客

12-25

7816

因为require是webpack提供的一种加载能力，但是如果项目是用vite搭建的,就需要使用new URL(url, import.meta.url).href的格式引入图片。如下图所示：直接import引用该图片路径。

使用require动态引用图像地址报错

fymsnow的专栏

10-17

633

原因为 webpack本身是一个预编译的打包工具，无法预测未知变量路径不能require纯变量路径，所以前置地址必须是静止的。注意，就算使用es6的模板字符串，改为require(`${path}`)也不行。require(path) 的path 至少要有三部分组成, 目录+文件名+后缀。在写vue中，需要在js中动态引用图像地址。目录： webpack 才知道从哪里开始查找。后缀：文件后缀，必须要加上，不然会报错。文件名：可用变量表示。

vue引用require图片路径时，当找不到此图片时，报错解决方法

u014266734的博客

07-21

1144

vue引用require图片路径时，当找不到此图片时，报错解决方法

解决Vue中动态渲染图片路径报错问题

weixin_75115821的博客

10-26

871

今天在做项目的时候在本地assets中后动态渲染加载图片，死活加载不出来，F12控制台提示图片存在路径错误，但是不使用动态渲染，一模一样的路径，就可以渲染出来，就很神奇。其中说到了直接路径会编译为 require('./image.png')这类资源将会直接被拷贝，而不会经过 webpack 的处理。代码如下，可以看见动态渲染的地址直接写的地址一模一样，但就是渲染不出来。这样图片就能成功渲染了，不在出现路径错误。

Vue 动态绑定图片地址，使用require也失效问题解决方案

TurtleOrange的博客

09-15

3166

解决Vue中，使用require显示图片失效问题

vue3 动态引入图片时报错之“require is not defined”

weixin_61498310的博客

02-02

2237

在vue3中使用require引入img时，发现控制台报错“require is not defined”。因为vue3项目使用vite创建的，而require是webpack提供的一种加载能力。使用new URL(url, import.meta.url).href的格式引入图片。直接使用import引用该图片路径。