all images disappear when i deploy my vue js app on netlify

Question

I have a todo-list app I tried deploying it on Netlify it got deployed but all images disappeared I don't know why, NOTE: this is my first time using Vue js or any framework. , NOTE: when I run serve everything shows just fine,

Here is how I used the images

:root {
      --bg-mobile-light: url("~@/assets/bg-mobile-light.jpg");
    --bg-desktop-light: url("~@/assets/bg-desktop-light.jpg");
    --theme-icon-light: url("~@/assets/icon-moon.svg");
    --check-icon: url("~@/assets/icon-check.svg");
    --bg-mobile-dark: url("~@/assets/bg-mobile-dark.jpg");
    --bg-desktop-dark: url("~@/assets/bg-desktop-dark.jpg");
    --theme-icon-dark: url(" ~@/assets/icon-sun.svg"); 
}
.dark {
    --header-img:var(--bg-desktop-dark);
    --theme-icon:var(--theme-icon-dark);
    --header-img-mobile:var(--bg-mobile-dark);
}

 .light {
    --header-img:var(--bg-desktop-light);
    --theme-icon:var(--theme-icon-light);
    --header-img-mobile:var(--bg-mobile-light);
 }

.header {
    background-image: var(--header-img);
}

.themeSwitch-label {
    background-image: var(--theme-icon);
}

Answer 1

The images are working and included, but the issue is that the .dark or .light classes aren't being applied.

Looks like you have a theme value set in your local storage that is not present on the netlify app.

Replace

const theme = localStorage.getItem('theme')

with

let theme = localStorage.getItem('theme');
if (theme !== 'dark') theme = 'light'

this will ensure that there always is a default, and only allows light or dark