vue3 本地图片展示，部署后加载失败解决

vue3 本地图片展示，部署后加载失败，添加一个方法，用方法包住img路径就可以成功展示了。亲测有效

// 处理img路径方法
const getImageUrl = (name) => {
    
    
  return new URL(`../assets/imgs/${
      
      name}`, import.meta.url).href
}

注意： 图片路径‘…/assets/imgs/’以自己真实路径为准

template

<template>
  <img :src="getImageUrl(img)" alt="" />
</template>

数组：

const list = ref([
  {
    
    id: 1, title: '抖音', img: 'douyin.png'},
  {
    
    id: 2, title: '快手', img: 'kuaishou.png'},
])