vite+vue3引入动态图片时出错

在使用vite开发vue项目时，我们异性习惯vue2的方法导入图片，结果导致各种找不到图片

以下是错误方法

<img :src="logo" class="login-logo" />

const url = reactive({
  logo: '../../assets/logo.svg'
})
const { logo } = toRefs(state);

实际上使用这种方法完全无法读取到图片，

在vite中有对读取表态资源的方法【new URL(url, import.meta.url)】更为详细的使用方法

可以得出以下写法实现

const state = reactive({
  logo: new URL(`../../assets/logo.svg`, import.meta.url).href
})
const { logo } = toRefs(state);

也可以动态导入图片

function getImageUrl(name) {
  return new URL(`./dir/${name}.png`, import.meta.url).href
}

 

注意：无法在 SSR 中使用