使用vue3+vite创建的项目，动态引入本地图片，不能直接使用require

最新推荐文章于 2025-03-13 14:06:13 发布
最新推荐文章于 2025-03-13 14:06:13 发布
阅读量1.6k 收藏 3
点赞数 2
CC 4.0 BY-SA版权
分类专栏： vue3项目记录 文章标签： vue.js uniapp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bao_Heng/article/details/134641738
在Vue3结合Vite的项目中，由于Vite不支持require，因此无法直接使用require导入本地图片。为解决此问题，可以采用import动态导入图片，例如`import img from '@/assets/image.png'`，然后在模板中使用`<img :src="img">`。另一种方法是使用动态计算属性，如`<img :src="require('@/assets/image.png')"`，但这种方式可能不被官方推荐。

vite中没有require，require是在webpack中使用的
可以使用import先导入图片，再使用
例如

import deviceImg from '@/static/images/device.png'

然后再组件里边images标签里边使用，例如
<image class="img" :src="deviceImg"></image>

或者是使用


                

                
                
        

    

    
  


        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
                
                    
                    超级会员免费看
                
            

            
            
            
        


    



                



	

		

			

				
					
Vue3加载本地assets图片

				
			

			

				

					专注于技术，分享实战经验，探索技术边界，用代码构建更美的数字世界。
				

				

					03-16
					
					1万+
					
				

			

		

		

			
				
之前在Vue2中使用require来获取


let imgs = reactive([
  require('@/assets/img/index/index1.jpg'),
  require('@/assets/img/index/index2.jpg'),
  require('@/assets/img/index/index3.jpg'),
  require('@/assets/img/index/index4.jpg'),
  require('@/assets/img/index/index

			
		

	



                

            
              



	

		

			

				
					
Vue 3 中引入图片的方法

				
			

			

				

					码农键盘上的梦
				

				

					08-08
					
					4731
					
				

			

		

		

			
				
在 Vue 3 中引入图片的方式与 Vue 2 有所不同，主要是因为 Vite 的使用。通过上述方法，你可以轻松地在 Vue 3 应用中引入和使用图片资源。无论你是需要引入静态图片还是动态加载图片，都可以找到适合的方法。希望这篇文章对你有所帮助！如果你有任何疑问或需要进一步的信息，请随时提问。

			
		

	



              


  
              

                


	

		

			

				
					
在vue3-vite项目中，实现动态加载本地照片

				
			

			

				

					weixin_55325334的博客
				

				

					04-17
					
					5530
					
				

			

		

		

			
				
1. 动态照片的渲染，在vite中，不能直接通过:src="item.image"的方式获取到照片，
2. 封装getAssetURL()函数，实现动态加载照片

			
		

	





	

		

			

				
					
vite 实战图片预加载方案

				
			

			

				

					xfy196的博客
				

				

					12-12
					
					837
					
				

			

		

		

			
				
前端图片预加载是一种优化用户体验的技术，通过提前加载图片资源，确保用户在需要查看图片时能够快速显示，而不会因为图片加载延迟而导致界面卡顿或空白。

			
		

	



		

			
		



	

		

			

				
					
vue3引入图片 无法使用require， vue3+vite构建项目使用require引入包出现问题需要用newURL来动态引入图片等静态资源

				
			

			

				

					weixin_42216520的博客
				

				

					04-23
					
					2088
					
				

			

		

		

			
				
vue3引入图片 无法使用require， vue3+vite构建项目使用require引入包出现问题需要用newURL来动态引入图片等静态资源

			
		

	





	

		

			

				
					
在vue 3 + vite中，动态导入本地图片，解决require不生效问题

				
			

			

				

					weixin_48677331的博客
				

				

					02-26
					
					1251
					
				

			

		

		

			
				
在vue2项目中，我会使用require来实现动态图片的加载，但是，当我把这个代码写入vue3+vite的项目中，结果报错：require is not defined。

			
		

	





	

		

			

				
					
【vue3】Vue3 + Vite 项目搭建

				
			

			

				

					weixin_45034639的博客
				

				

					01-28
					
					4430
					
				

			

		

		

			
				
Vue3 + Vite + Vant UI 

			
		

	





	

		

			

				
					
搭建vue3+vite+pinia项目步骤

				
			

			

				

					小破孩的博客
				

				

					07-04
					
					1891
					
				

			

		

		

			
				
搭建 vue3+vite+pinia 项目超详细步骤

			
		

	





	

		

			

				
					
Vue3+vite+TypeScript+Vant项目搭建

				
			

			

				

					VnOcean的博客
				

				

					09-01
					
					1278
					
				

			

		

		

			
				
本篇讲述基于NodeJs、Vite、Vue3、Typescript搭建前端项目的详细步骤，此外还包括配置pinia（store）、router、跨域代理以及引入vant库的主要步骤。

			
		

	





	

		

			

				
					
vue3+vite+js+elementPlus项目搭建

				
			

			

				

					weixin_74883980的博客
				

				

					11-24
					
					1424
					
				

			

		

		

			
				
3、在 src 目录下创建 router 文件夹，并创建 index.js 文件这里创建的是我们的路由配置文件，我们可以将路由全部写在里面，因为有些项目可能页面会很多，所以建议创建不同的文件夹来分块，在这个文件里面也可以进行路由守卫和拦截器的书写。2、在 src 目录下创建 views 文件夹，并创建 home.vue 文件，用来存放我们的vue页面,想写多少写多少。运行成功后即可看到访问地址为：http://localhost:3000 ，通过地址可以看到 Vue 项目页面。vite项目结构大致如下啊。

			
		

	





	

		

			

				
					
Vue 3+vite 动态引入本地图片img

				
			

			

				

					简单Cere
				

				

					02-01
					
					1362
					
				

			

		

		

			
				
Vue3动态换图，换壳思路

			
		

	





	

		

			

				
					
vue3+vite引入图片不能再用require,要使用new Url(完整方法步骤)

				
			

			

				

					weixin_38345306的博客
				

				

					10-26
					
					2326
					
				

			

		

		

			
				
vue3+vite引入图片不能再用require,要使用new Url(完整方法步骤)

			
		

	





	

		

			

				
					
vue3中vite 加载本地图片或动态加载图片

				
			

			

				

					qq_39016177的博客
				

				

					08-02
					
					2465
					
				

			

		

		

			
				
vue3中vite  加载本地图片或动态加载图片

			
		

	





	

		

			

				
					
Vue3的vite中图片的动态加载

				
			

			

				

					yiyueqinghui的博客
				

				

					01-04
					
					5998
					
				

			

		

		

			
				
【代码】Vue3的vite中图片的动态加载。

			
		

	





	

		

			

				
					
Vite 动态引入本地图片 以及打包404的问题

				
			

			

				

					扛麻袋的少年的博客
				

				

					08-06
					
					742
					
				

			

		

		

			
				
Vite 动态引入本地图片 以及打包404的问题

			
		

	





	

		

			

				
					
在Vue 3中加载本地图片和其他静态资源

					
热门推荐

				
			

			

				

					码农键盘上的梦
				

				

					02-23
					
					1万+
					
				

			

		

		

			
				
以上是几种加载本地图片和其他静态资源的方法，根据你的具体需求和项目配置选择适合的方法即可。首先，确保你已经安装了file-loader或url-loader插件。首先，确保你已经安装了file-loader或url-loader插件。如果图片和组件位于同一目录下，可以在模板中直接使用相对路径来引用本地图片和其他静态资源。如果你使用了Webpack等构建工具，也可以使用ES6的。例如，如果图片位于与组件相同的目录下，可以使用。函数将图片作为模块导入，然后在组件中使用它。目录下，然后使用绝对路径来引用它们。

			
		

	





	

		

			

				
					
vite动态导入图片

				
			

			

				

					weixin_44368048的博客
				

				

					09-30
					
					3410
					
				

			

		

		

			
				
vite踩坑！无法使用require引入图片

			
		

	





	

		

			

				
					
vue 3 动态引入图片

				
			

			

				

					withme
				

				

					01-03
					
					1948
					
				

			

		

		

			
				
【代码】vue 3 动态引入图片。

			
		

	





	

		

			

				
					
vue3加载本地图片资源img

					
最新发布

				
			

			

				

					第⑦个前端
				

				

					03-13
					
					443
					
				

			

		

		

			
				
对应的img位置为/src/assets/imgs/home/qrcodePage.png。先定义一个方法getImgUrl。

			
		

	





	

		

			

				
					
vue3+vite不能使用require引入包的问题

				
			

			

				

					11-14
				

			

		

		

			
				
当你尝试使用 `require` 或者 `import * as` 来引入外部模块时，在 Vue3 + Vite 的组合下可能会遇到一些问题。这是因为 Vite 默认配置是基于 ES 模块（`.mjs` 文件），而不是 CommonJS（`.js` 文件）。CommonJS 的 `...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值