vue3在vite下build生成的静态图片路径问题？

vite.config.ts文件代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path=require('path')

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname,'./src')
    }
  }
})

图片显示页面代码

<template>
<div>
  加载图片<br/>
  <img :src="item.url" width="250" height="220" v-for="(item,index) in data.imglist" :key="index" alt=""/>

</div>
</template>

<script setup lang="ts">
import {onMounted, reactive} from "vue";

  const data=reactive({
    imglist:[] as any[]
  })
  const getImageUrl=(name:any)=>{
    console.log(name)
    return new URL(`../assets/${name}`,import.meta.url).href
  }
  onMounted(()=>{
    data.imglist=[
      {url:getImageUrl('room/b.png')},
      {url:getImageUrl("room/d.png")},
    ]
  })
</script>

<style scoped>

</style>

下面是我build生成后的文件，我前面明明有一个room的文件夹，但是build后确直接在assets文件夹下面生成了，这是什么原因？还有../assets/${name}这里为什么不能写成@/assets/${name}?