无法通过 CSS 在 <section> 中设置图像答案

【问题标题】：Not able to set the image in a <section> by CSS无法通过 CSS 在 <section> 中设置图像
【发布时间】：2021-04-08 05:44:15
【问题描述】：

我正在尝试通过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 (Not Found)

【问题讨论】：

您在控制台中看到了哪些错误？
localhost/:1 GET localhost/static/bg.jpg 404（未找到）
图片路径错误。确保它是相对于 CSS 文件引用的。
如果直接将URLhttp://localhost/static/bg.jpg放到浏览器中，会出现404错误。您需要修复它，这意味着修复服务器代码提供静态内容的方式。您在 URL 上指定的路径是相对于 URL 根目录的，但在您的服务器内部，您必须编写代码将此路由映射到特定文件夹位置。如果您使用的是 html 包，则需要输入代码以将文件传递给客户端。
这是一个很好的例子stackoverflow.com/a/59088331/1992793

标签： html css node.js pug

【解决方案1】：

感谢大家的支持，感谢 JOHN RC 的建议。实际上我的静态文件服务有问题我不知道那是什么，但我从Express.js 的官方网站复制粘贴了一些代码这对我有帮助，如果您能向我解释两种语法，我将更加感激。导致一个错误和一个解决了我的错误的错误。导致错误的语法是：app.use('./static',express.static('static')) 和解决我的问题的语法是：app.use('/static', express.static(path.join(__dirname, 'static')))。请告诉我这两种语法之间的区别是什么，可以在Express.js的官方文档中找到。

【讨论】：

请提出一个新问题，而不是在回答中提出问题。
此外，如果您明确表示您使用的是express.js，那将会有所帮助。我以为您使用的是基本的html 包。您可以使用express 标签来帮助说明这一点。
下次我会记住的谢谢！

【解决方案2】：

如果您的 CSS 文件在另一个文件夹中，那么您需要像这样提供 css。

background:center/cover no-repeat url("../static/bg.jpg");

如果您仍然遇到问题，请将页面链接发送给我。

【讨论】：

如何在 LocalHost 中分享我正在制作网站的链接。