vue3+vite assets动态引入图片的三种方法及解决打包后图片路径错误不显示的问题

<img :src="require('@/assets/images/home/home_icon.png')" />

import homeIcon from '@/assets/images/home/home_icon.png'
<img :src="homeIcon" />

// 获取assets静态资源
export default  const getAssetsFile = (url: string) => {
   return new URL(`../assets/images/${url}`, import.meta.url).href
}

import usePub from '@/util/public-use'
setup () {
  const Pub = usePub()
  const getAssetsFile = Pub.getAssetsFile
  return { getAssetsFile }
}

<img :src="getAssetsFile('/home/home_icon.png')" />

// 获取assets静态资源
export default const getAssetsHomeFile = (url: string) => {
    const path = `../assets/images/home/${url}`;
    const modules = import.meta.globEager("../assets/images/home/*");
    return modules[path].default;
}

import usePub from '@/util/public-use'
setup () {
  const Pub = usePub()
  const getAssetsHomeFile = Pub.getAssetsHomeFile 
  return { getAssetsHomeFile }
}

<img :src="getAssetsHomeFile('home_icon.png')" />

.imgText {
  background-image: url('../../assets/images/1462466500644.jpg');
}

.imgText {
  background-image: url('src/assets/images/1462466500644.jpg');
}