vite4+vue2图片标签img动态获取图片路径

主要方法，放在utils文件夹下

/**
 * @description: vite拿到图片路径放在img标签中
 * @param {string} file 文件名
 */
export const getImgUrl = (file) => {
	// 注意是你自己的路径，只能../引入
  return new URL(`../assets/images/${file}`, import.meta.url).href
}

main.js引入注册

import {  getImgUrl } from '@/utils/common'

Vue.prototype.$getImgUrl = getImgUrl // 引入vite获取图片url方法

vue组件使用， 注意是你自己的路径，别忘记前面写了…/assets/images/

      <template v-for="(popover, index) in popovers">
          <img :src="$getImgUrl(`map/${popover.img}.png`)" />
    </template>