Electron + Vite project cannot show png resource - vue.js

Question

I am using Vite + Electron to make a desktop app demo.
But it cannot load png resource, but js, css resource is fine. So it worked like this
png canoot be loaded
when I check the console, it shows: Failed to load resource: net::ERR_FILE_NOT_FOUND
Also, the url of the png is weird：
it is not even a common file path
So what happened really ???
Here is my code:
vite.config.js
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
base: path.resolve(__dirname, './dist/'),
plugins: [vue()]
})
index.js
const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
webSecurity: false,
}
})
win.loadFile('dist/index.html')
win.webContents.openDevTools()
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
App.vue
<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<img alt="Vue logo" src="/src/assets/logo.png" />
<HelloWorld msg="Hello Vue 3 + Vite" />
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
I know perhaps this problem sounds silly, but I just start it and Vue,JS... are really not my comfort zone. So if anyone could help me, I will really appreciate it.