vue3+vite 解决动态导入图片，不成功的问题

vue3+vite 解决动态导入图片，不成功的问题

export const getAssetsFile = (url) => {
  return new URL(`../assets/img/${url}`, import.meta.url).href
}

该代码的作用：他会返回一个url连接，该连接是在内存里临时开辟的，不可以传递给后端，但是用来做src的值没问题

使用方法一：

const list = [
  {
    active: '',
    event: 'switch-base',
    index: 4, // 为保证当前为首页图层，提高优先级
    label: '地图',
    name: 'vector',
    src: getAssetsFile('map/legend/icon-dark.png')
  },
  {
    active: '',
    color: 'rgba(0, 187, 255, .6)',
    event: 'switch-base',
    index: 3,
    label: '海图',
    name: 'sea',
    src: getAssetsFile('map/legend/icon-dark.png')
  },
  {
    active: 'active',
    color: 'rgba(22, 127, 255, .6)',
    event: 'switch-base',
    index: 2,
    label: '遥感',
    name: 'image',
    src: getAssetsFile('map/legend/icon-dark.png')
  },
  {
    active: '',
    color: 'rgba(0, 63, 151, .6)',
    event: 'switch-base',
    index: 1,
    label: '深色',
    name: 'dark',
    src: getAssetsFile('map/legend/icon-dark.png')
  }
]

在数据里提前拼接好

使用方法二：

item.src 的值为map/legend/icon-dark.png
<img :src="getAssetsFile(item.src)" />