Body background image scss vue asset missing - vue.js

Question

I just finished my Vue app and was ready to deploy. After deploying to staging, the background image is missing. When I check the console, I see the path:
https://632c3be20c0c390ad1480ba9--xxx.netlify.app/assets/~#/assets/img/bg.png
So it seems its not compiling it correctly?
Here is my code:
body {
font-family: $bodytext;
font-size: 10px;
font-weight: 400;
color: $bodycolor;
background-image: url('~#/assets/img/bg.png');
background-repeat: no-repeat;
background-position: bottom;
background-size: cover;
background-attachment: fixed;
}
And here are some screenshots from the build and the error in the browser.
What exactly am I doing wrong?
And here is my package.json:
{
"name": "vue-project",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview --port 4173"
},
"dependencies": {
"bootstrap": "^5.2.1",
"bootstrap-vue": "^2.22.0",
"jquery": "^3.6.1",
"node-sass": "^7.0.3",
"popper.js": "^1.16.1",
"sass-loader": "^13.0.2",
"vue": "^2.7.10",
"vue-router": "^3.5.4"
},
"devDependencies": {
"#vitejs/plugin-legacy": "^2.0.0",
"#vitejs/plugin-vue2": "^1.1.2",
"sass": "^1.54.9",
"terser": "^5.14.2",
"vite": "^3.0.2"
}
}
And my vite.config file:
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import legacy from '#vitejs/plugin-legacy'
import vue2 from '#vitejs/plugin-vue2'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue2(),
legacy({
targets: ['ie >= 11'],
additionalLegacyPolyfills: ['regenerator-runtime/runtime']
})
],
resolve: {
alias: {
'#': fileURLToPath(new URL('./src', import.meta.url))
}
}
})

Answer 1

Changed the css to: background-image: url('/src/assets/img/bg.png'); and now its working..