记录一下---关于使用vite创建的vue3项目无法使用require引入静态图片问题的解决

最新推荐文章于 2024-12-11 16:13:35 发布
最新推荐文章于 2024-12-11 16:13:35 发布
阅读量305 收藏
点赞数
文章标签： 前端 vue.js
原文链接：http://t.csdn.cn/773K8
版权
本文介绍了一种在前端开发中为图片元素设置默认显示图片的方法。通过导入默认图片资源并将其赋值给目标图片元素的avatar属性，可以确保在加载自定义图片失败时能够顺利展示默认图片。

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

http://t.csdn.cn/773K8    参考文章

// 直接引入使用
import defaultImg from '../assets/image/defaultImg.png'

item.avatar = defaultImg

<img :src="item.avatar" class="rounded-circle" alt="">
cdjokeZhang
关注
Vue3 - vite 项目报错：Uncaught ReferenceError: require is not defined（解决 vue3 vite 项目无法识别 require 语法导致报错）
王二红
12-16 2万+
vue3，vite，报错解决，vue3+vite报错requireisnotdefined，vue3vite引插件不识别require，老插件必须用require怎么办，vite项目插件要求使用require引入但报错，vue3不兼容require导致第三方包插件无法使用，vue3vite中使用require报错怎么办，解决Vite+vue3使用第三方依赖报错“requireisnotdefined”问题，vite项目require语法兼容问题解决requireisnotdefine
Vue3 - Vite 使用 vite-plugin-require-transform 插件运行或打包时出现报错，vue3 + vite 项目执行 build 打包时出现各种问题错误（保证完美解决）
王二红
01-01 7022
vue3，vite，vite-plugin-require-transform，打包报错，运行报错，npmrunbuild出现一堆报错，执行打包命令后出现报错怎么办，vue3+vite使用vite-plugin-require-transform插件build打包时报错如何解决，vue3项目中运行打包出现了很多警告提示报错，vue3使用阿里云ali-oss插件sdk导致打包报错解决方法，vue引入ali-oss阿里云oss的sdk运行build打包时报错，vite打包失败，import*as_vi
vite默认是不支持@和require（vite中使用vue2语法）
weixin_40922551的博客
05-18 2428
vite中使用vue2语法配置
vite创建的项目不能使用require引入
weixin_46394325的博客
05-24 1279
vite构建项目不能用require引入的解决办法
vue3引入图片等无法使用require，需要用newURL来动态引入图片等静态资源
seimeii的博客
08-01 2904
vue3引入图片等无法使用require，需要用newURL来动态引入图片等静态资源
Vue3+TS+Vite无法使用require导入图片的解决方法
小火车况且况且况且的博客
11-09 2640
Vue3+TS+Vite无法使用require导入图片的解决方法
《Vite 基础知识》Vite 不支持 require 解决方案（三种情况/require is not defined）
热门推荐
前端技术
03-01 1万+
Vite 不支持 require 解决方案（三种情况/require is not defined）
electron-vue-vite:Electron、vue3、vite2、ant-design-vue2 整合
05-02
Electron + vue3 + vite2 + ant-design-vue2 整合 :bug: 已知问题 项目打包后仍有问题 待解决... 暂时通过集成 webpack 解决打包问题 How and Why 写这个 Demo 项目主要有两个目的 vue@3.x 发布了，想试试新功能 ...
Vue3 - vite 引入本地图片方法，页面引入本地静态资源图像详细教程，解决 UI 前端组件库的图片属性无法使用本地图像问题（无论是本地开发还是打包部署，本地图片的路径正常可用）
王二红
09-08 1万+
vue3vite引入使用本地图片，vue3vite如何引入本地资源的图片图像，vite怎么把本地的图片赋值给src图片标签属性，vue3vite使用require引入本地图像报错，vue3vite组件库的组件怎么引入本地图片，vue3vite如何给组件库的图片属性链接本地资源的图像，elementplusantdesignvue组件怎么使用本地资源的静态图片，vue3vite版本引入本地静态图片的方式，vue3+vite引入本地图片，vue3如何加载本地图片等静态资源，引入
Vue3 - 解决报错 [plugin:vite-plugin-require] Unsupported type: ArrayExpression（插件使用require时出现错误详细解决方案）
最新发布
王二红
12-11 6112
vue3，nuxt3，vite，报错[plugin:vite-plugin-require]Unsupportedtype:ArrayExpression如何解决，vue3使用vite-plugin-require插件出现错误，使用require引入时提示，nuxt3使用require，如何解决这个问题，vue3Unsupportedtype:ArrayExpression，vite-plugin-require，安装引入第三方插件，不支持数组array依旧报错，删除了也不行，关于Vite不能使
vue3+vite引入图片不能再用require,要使用new Url(完整方法步骤)
weixin_38345306的博客
10-26 2187
vue3+vite引入图片不能再用require,要使用new Url(完整方法步骤)
Vite搭建的vue项目，require引入图片资源报错
qq_62291805的博客
04-07 452
最近用到图片资源，在引用的时候纳闷为什么require方式引入图片一直报错（require is not defined），后来发现vite搭建的项目不能使用require。
vue3+vite创建的项目require和import引入方式问题报错
墨迹斑斑的老墙
07-17 288
删除package.json中的type:"moudle"就好了。不会因为使用require报错了。其他的方式比如把文件改mjs cjs的太麻烦，还容易有别的问题。
vue3 Vite中不能使用require问题
dwqdfwqdqw的博客
06-24 1316
Vite中不能使用require问题
在vue3+vite中 使用require
weixin_42348009的博客
11-21 4186
【代码】在vue3+vite中 使用require。
ReferenceError: require is not defined 【vue3 +vite +setup语法使用报错】
qq_43813351的博客
03-11 1万+
但在vue3中的vite没有require方法定义的使用，说白了就是不使用require方法进行资源的导入，而是使用新的方法。直接使用 new URL(url, import.meta.url) 语法。原本我们在vue2时代，可以使用require 导入静态资源，如下所示。使用 import导入资源。
vite构建项目不能使用require解决方案
m0_59074147的博客
11-21 1267
在utils文件夹下创建一个getImgUrl.ts文件。在需要的页面引入并使用。
vite不支持 require 使用require报错 如何解决
c327127960的博客
02-09 7369
vite 不支持 require 使用require报错
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值