【前端】Vite项目图片动态引入

我采用的vite构建的vue3项目，没有require命令动态引入本地图片，

引入图片方法如下： 仅供参考

方式1，无法动态

import emptyImage from '@/assets/home/yd_4.png'

方法2，正常调用，传参index.php/tags-653.html" >可以v-for来获取动态的

const getFilePath = (url: string) => {  console.log(' ~ getFilePath ~ url:', url)  let imgH = new URL(`/src/assets/home/${url}`, import.meta.url).href  console.log(' ~ getFilePath ~ imgH:', imgH)  return imgH}

在项目中用的是芋道框架改版的，用上面的方案会出现undefined，由于import.meta.url返回的是包含查询参数的完整 URL，可能会导致路径拼接时出现错误。window.location来获取当前页面的URL路径

解决

    getFilePath(url) {      console.log('接收', url, 'SSS', window.location.href);      let img = new URL(`/src/assets/images/${url}`, window.location.href).href;      console.log('返回', img);      return img;    },