CSS 无法在 <section> 中设置图像
Not able to set the image in a <section> by CSS
我正在尝试通过 CSS
在 node.js
的 PUG 模板引擎中设置图像,但是图片没有出现在屏幕上,而其他属性工作正常。
这是该部分.PUG
文件的代码
section#introsection
| Section for Pictures
这是包含在 .PUG 文件中的 css 文件的代码
#introsection{
background:center/cover no-repeat url("/static/bg.jpg") ;
color: white;
display: flex;
height: 300px;
background-color: lightgreen;}
我的图片在静态文件夹中,如代码所示。其他变化是 CSS 文件在浏览器中正常反映,但没有图片出现。
我在控制台中收到的错误是:localhost/:1 GET http://localhost/static/bg.jpg 404(未找到)
如果您的 CSS 文件在另一个文件夹中,那么您需要这样输入 css。
background:center/cover no-repeat url("../static/bg.jpg");
如果您仍然遇到问题,请将页面发送给我 link。
感谢大家的支持,感谢 JOHN RC suggestion.Actually 我的静态文件服务有问题我不知道那是什么,但我从官方网站复制粘贴了一些代码Express.js
的帮助我,如果你能向我解释这两种语法,我将更加感激。导致错误的错误和解决我的错误的错误。
导致错误的语法是:app.use('./static',express.static('static'))
解决我的问题的语法是:app.use('/static', express.static(path.join(__dirname, 'static')))
。请告诉我这两种语法之间的区别是什么,可以在 Express.js
的官方文档中找到。
我正在尝试通过 CSS
在 node.js
的 PUG 模板引擎中设置图像,但是图片没有出现在屏幕上,而其他属性工作正常。
这是该部分.PUG
文件的代码
section#introsection
| Section for Pictures
这是包含在 .PUG 文件中的 css 文件的代码
#introsection{
background:center/cover no-repeat url("/static/bg.jpg") ;
color: white;
display: flex;
height: 300px;
background-color: lightgreen;}
我的图片在静态文件夹中,如代码所示。其他变化是 CSS 文件在浏览器中正常反映,但没有图片出现。
我在控制台中收到的错误是:localhost/:1 GET http://localhost/static/bg.jpg 404(未找到)
如果您的 CSS 文件在另一个文件夹中,那么您需要这样输入 css。
background:center/cover no-repeat url("../static/bg.jpg");
如果您仍然遇到问题,请将页面发送给我 link。
感谢大家的支持,感谢 JOHN RC suggestion.Actually 我的静态文件服务有问题我不知道那是什么,但我从官方网站复制粘贴了一些代码Express.js
的帮助我,如果你能向我解释这两种语法,我将更加感激。导致错误的错误和解决我的错误的错误。
导致错误的语法是:app.use('./static',express.static('static'))
解决我的问题的语法是:app.use('/static', express.static(path.join(__dirname, 'static')))
。请告诉我这两种语法之间的区别是什么,可以在 Express.js
的官方文档中找到。