Vue3 + Vite 动态引入图片

动态引入图片"/>

Vue3 + 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: { img: string, select: string} = {img: '',select: ''}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: { img: string, select: string} = {img: '',select: ''}import('./image' + item.path).then((res) => {obj.img = res.default})imgUrl.push(obj)})
}

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

方法 二

可以将此方法暴露，需要动态使用图片的时候使用这个方法

import { ElMessage } from 'element-plus'/*** 获取文件* @param url: string* examples /src/assets/img/xxx.png*/
export default function useFileHome(url: string) {const modules = import.meta.globEager('/src/**/*.{png,svg,jpg,jpeg}')if (modules[url]) return modules[url].defaultelse {ElMessage({message: 'Error url is wrong path',type: 'error',showClose: true})console.error('Error url is wrong path')}
}