[英]all images disappear when i deploy my vue js app on netlify
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.我有一个待办事项列表应用程序,我尝试在 Netlify 上部署它,但所有图像都消失了,我不知道为什么,注意:这是我第一次使用 Vue js 或任何框架。 , 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);
}
The images are working and included, but the issue is that the .dark
or .light
classes aren't being applied.图像可以正常工作并包含在内,但问题是没有应用.dark
或.light
类。
Looks like you have a theme
value set in your local storage that is not present on the netlify app.看起来您在本地存储中设置了 netlify 应用程序中不存在的theme
值。
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
这将确保始终存在默认值,并且只允许light
或dark
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.