當我在 netlify 上部署我的 vue js 應用程序時，所有圖像都消失了

Question

我有一個待辦事項列表應用程序，我嘗試在 Netlify 上部署它，但所有圖像都消失了，我不知道為什么，注意：這是我第一次使用 Vue js 或任何框架。 ，注意：當我運行服務時，一切都顯示得很好，

這是我使用圖像的方式

: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

圖像可以正常工作並包含在內，但問題是沒有應用.dark或.light類。

看起來您在本地存儲中設置了 netlify 應用程序中不存在的theme值。

代替

const theme = localStorage.getItem('theme')

和

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

這將確保始終存在默認值，並且只允許light或dark