环境变量的获取方式:
使用vue-cli搭建的vue架构,获取环境变量的方式是:process.env。
使用vite搭建的vue架构,获取环境变量的方式是:import.meta.env。
通过图片名称动态加载图片的方式:
vue-cli的方式:
require方法中填写上正确的图片路径
<img src={require(`./imgs/${name}.png`)} alt="" />
vite的方式:
通过给getImageUrl方法传入图片name实现动态加载
<img src={getImageUrl(item.name)} alt="" />
getImageUrl的Typescript的实现方式:
const getImageUrl = (name: string) => {
return new URL(`./images/${name}.png`, import.meta.url).href
}
通过以上代码分别实现vue-cli与vite中图片动态加载的实现方式。