标签：imgUrl const item obj Vue3 引入 import path Vite

Vue3 + Vite 动态引入图片

开发vue3 + vite项目的时候 想要动态的去引入图片来显示，尝试过require 发现报错
require is not defind
查看vite官方网站

官方说明

import imgUrl from './img.png'
document.getElementById('hero-img').src = imgUrl

行为类似于 Webpack 的 file-loader。区别在于导入既可以使用绝对公共路径（基于开发期间的项目根路径），也可以使用相对路径。

那么问题来了 怎么动态的获取我想要的图片组呢？

查看import() 方法

webpack根据ES2015loader规范实现了用于动态加载的import()方法。

这个功能可以实现按需加载我们的代码，并且使用了promise式的回调，获取加载的包。

那么开始 开心的尝试

场景：一个对象储存我各个图片地址信息，我希望动态的加载，于是：

const imgUrl = reactive<object[]>([])
const getImage = () => {
  mapElements.map((item) => {
    const obj = {}
    import(item.path).then((res) => {
      obj.img = res.default
    })
    imgUrl.push(obj)
  })
}

果不其然，挂掉了，浏览器表示，没有，啥都没有，没有鱼丸，也没有面。

浏览器会报404item.path 这个路径是无效的

想到字符串模版 想到字符串模版应该是可以的吧 ./image/${item.path}

这次编译器直接报错 期望是一个字符串 也就是说这种也不可以

开始查文档说明

webpack需要将所有import()的模块都进行单独打包，所以在工程打包阶段，webpack会进行依赖收集。

此时，webpack会找到所有import()的调用，将传入的参数处理成一个正则，其中所有的变量都会被.*所替换，然后查找所有匹配的包，将其做哦为package进行打包。所以说，真的会把所有包大包进来。

解决方法：静态化表达包所处的地址，最小化变量控制的区域。

const imgUrl = reactive<object[]>([])
const getImage = () => {
  mapElements.map((item) => {
    const obj = {}
    import('./image' + item.path).then((res) => {
      obj.img = res.default
    })
    imgUrl.push(obj)
  })
}

可以使用import('./image' + item.path)避免其他干扰

标签：imgUrl,const,item,obj,Vue3,引入,import,path,Vite
来源： https://blog.csdn.net/qq_43806604/article/details/121077528

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。