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

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

码农世界 2024-05-29 前端 90 次浏览 0个评论

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

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

方式1,无法动态

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

方法2,正常调用,传参可以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;
    },

转载请注明来自码农世界,本文标题:《【前端】Vite项目图片动态引入》

百度分享代码,如果开启HTTPS请参考李洋个人博客
每一天,每一秒,你所做的决定都会改变你的人生!

发表评论

快捷回复:

评论列表 (暂无评论,90人围观)参与讨论

还没有评论,来说两句吧...

Top