英文:
HTML site not showing certain elements when not using live server
问题
当我在VS Code中使用实时服务器时，一切都按预期运行，但当我通过文件打开网站时，它不显示某些元素。我注意到这些元素通常需要链接到其他文件，例如@font-face和background-image: url()。
我尝试重新启动电脑，以为它只是没有加载或出现了问题，但事实并非如此。文件和路径的结构是正确的，因为在实时服务器模式下它能正常工作，所以我怀疑这不是问题。
以下是可能有问题的代码部分和文件与实时服务器的屏幕截图：
@font-face {
font-family: Raleway;
src: url(/fonts/Raleway-Medium.ttf);
}
main{
background-image: url('/img/pozadina.png');
background-repeat: no-repeat;
background-position: center;
}
英文:
When i use the live server in VS Code everything works as expected, however when I open the site via files it doesn't show certain elements. I've noticed that it's the ones that require linking to other files. For example @font-face and background-image: url()
I've tried restarting my PC thinking that it just didn't load or something but that wasn't the case. The files and paths are structured correctly since it works in live server mode so I doubt that that's the problem
Heres parts of code that are most likely problematic and screenshots of file vs. live server
@font-face {
font-family: Raleway;
src: url(/fonts/Raleway-Medium.ttf);
}
main{
background-image: url('/img/pozadina.png');
background-repeat: no-repeat;
background-position: center;
}
答案1
得分: 0
尝试在路径中的文件夹之前添加点号（.）
@font-face {
font-family: Raleway;
src: url(./fonts/Raleway-Medium.ttf);
}
main{
background-image: url('./img/pozadina.png');
background-repeat: no-repeat;
background-position: center;
}
英文:
Try to add dots (.) before folders in path
@font-face {
font-family: Raleway;
src: url(./fonts/Raleway-Medium.ttf);
}
main{
background-image: url('./img/pozadina.png');
background-repeat: no-repeat;
background-position: center;
}
答案2
得分: 0
I found the solution, instead of adding one dot I had to add two. Now it works for both, browser file protocol and live server.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
@font-face {
font-family: Raleway;
src: url(../fonts/Raleway-Medium.ttf);
}
main{
background-image: url('../img/pozadina.png');
background-repeat: no-repeat;
background-position: center;
}
<!-- end snippet -->
英文:
I found the solution, instead of adding one dot i had to add two. Now it works for both, browser file protocol and live server.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
@font-face {
font-family: Raleway;
src: url(../fonts/Raleway-Medium.ttf);
}
main{
background-image: url('../img/pozadina.png');
background-repeat: no-repeat;
background-position: center;
}
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论