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

最新推荐文章于 2024-10-31 21:40:38 发布
最新推荐文章于 2024-10-31 21:40:38 发布
阅读量1.6k 收藏 3
点赞数 2
分类专栏： # vue3报错合集 文章标签： 前端 vue require 绑定图片地址 vue3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yangyangdt/article/details/122464737
版权
在Vue3中，当尝试使用require动态绑定图片路径时，会出现'can't find module'错误。原因是require需要一个完整的路径字符串。正确的方法是使用require结合模板字符串，如`require(`路径/${名称}`)`，而直接使用`require(路径+名称)`会导致错误。静态路径的require则无需动态绑定。

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

img不会识别这种动态绑定：会报错。

<img :src="'../../public/img'+item.url" /><br>

src绑定的会解析成一个纯字符串，只能通过在js里require（）先包一下，拼接好再显示。

require的使用方法：

require的作用就是解析动态绑定的图片路径。
下面这种写死的则不用动态绑定。

最低0.47元/天 解锁文章
技巧3 vue3项目 axios前后端交互 图片地址拼接方法
yangyangdt的博客
01-12 3803
当图片存储在前端的public文件夹下，后端的图片地址很可能是图片的名字，而不是路径，因为路径是前端的图片存储相对路径。这个时候就需要前端接到后端传值去拼接路径了。
VueCli3.x全栈开发-微信朋友圈(node/express/mongodb/vuecli3.x)
weixin_43964148的博客
08-20 1272
1.项目演示 2.express 搭建服务器 2.1.初始化项目 $ npm int 2.2.安装自动重启工具nodemon $ npm install -g nodemon 2.3.修改package.json中的script: "scripts": { "start":"node server.js", "server":"nodemon server.js" ...
React require 引入图片路径 报错 Cannot find moudle ‘.‘
小考拉的博客
09-01 2913
项目场景： 数据 通过 es6 map遍历 require图片 问题描述： require引用图片路径报错 Cannot find moudle "." 代码如下： 原因分析： 提示：这里填写问题的分析： 例如：Handler 发送消息有两种方式，分别是 Handler.obtainMessage()和 Handler.sendMessage()，其中 obtainMessage 方式当数据量过大时，由于 MessageQuene 大小也有限，所以当 message 处理不及时时，会造...
vue动态加载图片问题，报错Cannot find module "."
热门推荐
风华绝代的博客
04-02 1万+
正常在<img>标签加载图片的方式是 <img src="../assets/product2.jpg" alt=""> 但是在vue中动态加载图片，直接用src是无效的，需要使用v-bind动态加载 <img :src="product.imgSrc" alt=""> //正确 <img :src="../assets/product2.jpg" a...
vue 引入图片出现错误 Cannot find module ‘./XXX.jpg‘e
Python-PTA操作
11-05 1846
vue 引入图片出现错误 Cannot find module ‘./XXX.jpg‘e
vue3 动态获取图片地址
sj18838107211的博客
04-09 1194
vue3 动态获取图片地址
2022年最新前端面试题（大前端时代来临卷起来吧小伙子们..持续维护走到哪记到哪）
fwdwqdwq的博客
03-07 3098
HTML和Css部分 1、对BFC规范（块级格式化上下文）的理解 BFC 块级格式化上下文 一块独立的区域，有自己的规则，bfc中的元素与外界的元素互不影响 BFC是一块用来独立的布局环境，保护其中内部元素不受外部影响，也不影响外部。 怎么触发BFC 1. float的值left或right 2. overflow的值不为visible（默认） 3. display的值为inline-block、table-cell、table-caption 4. position的值为absolute（绝对定位）或f
vue-app项目知识点总结（二）
青椒的博客
05-23 1470
一. FeatureView 独立组件封装FeatureView div>a>img 二. TabControl 独立组件的封装 props -> titles div>根据titles v-for遍历 div -> span{{title}} css相关 选中哪一个tab, 哪一个tab的文字颜色变色, 下面border-bottom current...
报错Error: Cannot find module，解决vue动态加载图片失败问题
纳支猫的博客
12-17 9537
当图片保存在本地，然后将其路径放入数据库，再取出来的时候就会出现问题。 this.list[i].tpicture是图片的完整地址 即这种写法： src="…/assets/product.jpg"; imgSrc = require("…/assets/product.jpg") 这是错误的，require里边应该是path，所以应该写成这样： ‘…/assets/’+this.list[i].tpicture，即图中的形式： 所以在数据库中保存的时候只需要保存后半部分地址就可以，assets以及之前
Vue在v-for循环中动态加载相对路径图片，Error: Cannot find module ‘xxx‘的问题
如需咨询可联系我，V：chen2318341674
01-29 2074
Vue在v-for循环中动态加载相对路径图片，Error: Cannot find module 'xxx’的问题； 通过v-for来循环图片（图片是在当前项目内-相对路径） 先贴出正确的代码 <template> <div style="font-size: 0.15rem;"> <div class="tab"> <img :src="item.url" v-for="item in imgs" /> </div&gt
vue-cli动态加载图片问题，报错Cannot find module
lyy18719172450的博客
04-18 676
在做项目时遇到动态设置图片出现错误 <script> export default{ data(){ return{ src:'', img:'E:/web/vue-shop/src/assets/b7a99470-9f7b-11eb-aad4-45fe018fae54.jpg' } }, created(){ this.get() }, methods:{
vue3 快速入门 (三) : vue中的图片路径
朱豪凯的博客
07-17 3758
介绍在Vue3中，引用图片路径的3种方式
Error: Cannot find module ‘./XXX.jpg‘ 问题解决 Vue动态显示图片
weixin_43643765的博客
10-29 4975
刚开始学习Vue 在循环输出图片时，浏览器报错Error: Cannot find module ‘./tqwl.jpg’ 这张图片是放在本地文件夹内的 这是图片的展示代码 <el-table-column label="展示" width="180"> <template slot-scope="scope"> <el-image style="width: 100px; height: 100px"
Vue项目启动报错：error:cannot find module xxx
m0_74152912的博客
05-10 2475
原因：无法找到项目依赖的某个模块。如果报错，使用强制清除重新安装依赖
【vue项目开发遇到的问题】在vue3中引入图片报错 Uncaught (in promise) ReferenceError: require is not defined
m0_69892739的博客
12-25 7861
因为require是webpack提供的一种加载能力，但是如果项目是用vite搭建的,就需要使用new URL(url, import.meta.url).href的格式引入图片。如下图所示：直接import引用该图片路径。
vue3项目报错: Error: Cannot find module ‘vue-loader-v16/package.json‘
Zningsir的博客
03-15 288
最近这几天要做vue3项目，刚开始跑项目就报错，Error: Cannot find module ‘vue-loader-v16/package.json， 解决完之后再次希望帮助到更多的人 首先升级你的npm和cnpm（没安装镜像可以不用cnpmhttps://cnpmjs.org/） 完成之后删除node_modules依赖包 rm -rf node_modules // 先删除原来的依赖包 cnpm i // 重新安装 yarn serve 或 npm run serve 启动项目 ...
Vue3学习：vue组件中的图片路径问题
最新发布
wangyining070205的博客
10-31 743
今天在做一个案例的时候，图片放在assets/images文件夹下，如下路径，其中的图片不能正常显示。方法一 new URL(‘路径’,import.meta.url).href。方法二 把图片放到public目录下的images文件夹中。后来查了一下资料，有两种解决方法。
使用require动态引入组件不起作用或提示找不到组件的问题
qq_37038064的博客
07-24 2099
this.data.attributeOptions.controlTypeOptions.forEach(item => { let newPath = '' + item.path + '/' + item.controlType + '/index.vue' let path = newPath.replace(/\/\//g,"/") item.component = require(''+path).default }) **...
vue3+uni-app 报错TS2591: Cannot find name ‘require’. Do you need to install type definitions for node?
ZhaoQM_script的博客
01-09 4437
公司技术栈主要是vue，移动端是uni-app。最近打算迭代移动端项目，vue3都已经更新到3.2.x，vite也更新到2.x，前期大多数bate问题都已处理优化得差不多，正好趁这个机会将原来的vue2 + webpack 升级成 vue3 + vite + typescript。 问题出现 前期项目搭建就不在这里讲了，后面整理好了单独出一篇。讲一下遇到的问题：在一次模板语法使用require引入静态图片时，报了一个错 TS2591: Cannot find name ‘require’. Do you n
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值