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');}