堆栈内存溢出
  简体   繁体   English

express.js html 未加载 css 文件

[英]express.js html not loading css file

 原文  2021-11-01 04:21:12  5   1    javascript/ html/ css/ express/ web-applications

问题描述

i am new to express.js i made a project with express.js in which css file is in public folder and html files are in views folder but when started the webserver the html file rendered but it is not loading any css files i cant see any images too i think it is problem with express.js i tried running the html file with its path it worked when i run the html file with its path我是 express.js 的新手，我用 express.js 创建了一个项目，其中 css 文件位于 public 文件夹中，html 文件位于 views 文件夹中，但是当启动网络服务器时，html 文件呈现，但它没有加载任何我看不到的 css 文件任何图像也我认为这是 express.js 的问题我尝试使用其路径运行 html 文件，当我使用其路径运行 html 文件时，它可以工作

main.js主文件

    //Imports
    const express = require('express')
    const app = express()
    const port = 3000
    const path = require('path')
    
    
    //static files
    
    
    // Require static assets from public folder
    app.use(express.static(path.join(__dirname, 'public')));
    
    // Set 'views' directory for any views 
    // being rendered res.render()
    app.set('views', path.join(__dirname, 'views'));
    
    // Set view engine as EJS
    app.engine('html', require('ejs').renderFile);
    app.set('view engine', 'html');
    
    
    //routing
    
    app.get('', (req, res) => {
        res.render('index')
    })
    
    
    
    
    //server
    
    app.listen(process.env.port || 3000);
    console.log('Server started on 3000')


index.html

<!DOCTYPE html>
<html>
   <head>
      <link rel="stylesheet"
          href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   

      <link rel="icon" href="../public/img/kisspng-portable-network-graphics-computer-icons-transpare-braingoodgames-5c9d9c5093e378.8617067815538330406058.png" type="image/x-icon">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

      <script type="text/javascript">
         
         </script>




     
      <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1592285788506158"
     crossorigin="anonymous"></script>

      <div class="topnav">
         <div class="hover-underline-animation">
        
       <a class="active" href="index.html">Home</a> 
         <a href="contact.html">Contact</a>
         <a href="aboutus.html">About Us</a>
         <a href="https://stats.uptimerobot.com/V2x6XC2PP5">Status</a>
         
         </div>

      </div>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link type="text/css" rel="stylesheet" href="../public/css/style.css">
      <title>Beast Bot</title>
   </head>  
   <body>

      <div class="container">

      


        <div class="title">
           <p class="infotit">Hover the title</p>
           <P  class="anime"><span>Beast Bot :)</span></P>
         <div class="hideme">
              <img class="img" src="../public/img/kisspng-portable-network-graphics-computer-icons-transpare-braingoodgames-5c9d9c5093e378.8617067815538330406058.png">
            </div>
        </div>
        <div class="hide me">
        <h1 class="trust">Trusted by 10,000+ people</h1>
      </div>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <div class="hideme">
        <div  class="info">
           <div class="hideme">
           <p class="quote">A perfect moderation and fun bot<br>for your Discord Server</p>
         </div>
           <BR>
            <br>
            <a  href="https://discord.com/api/oauth2/authorize?client_id=876824416531664896&permissions=536870907895&scope=bot" class="btn" >Invite
            </a>
            <p class="quoto">Beast Bot is trusted by more than 10,000 people</p>
           <div class="h11">
            <h1>Features</h1>
            <br>
            <h3 class="h33">Moderation</h3>
            <img src="../public/img/features.png" class="features_img">
            <p class="f_txt">A perfect moderation bot for your discord server with commands like ban,kick,mute,lock</p>
            <br>
            <br>
            <h3 class="muchmore_txt">Much More</h3>
            <img src="../public/img/muchmore.png" class="muchmore">
            <P class="more_txt">Many more fun and anime commands like animegif,meme,cute and many more</P>
         </div>
         </div>
      </div>

        
    </div>
    

    <script src="../public/js/script.js"></script>
   </body>
   <div class="footer"> 
      <br>
      <br>
   <footer><P><i class="fa fa-github"  ></i> <i class="fa fa-copyright"></i> CaptainBeast#1394 - 2021</P></footer>
   <a href="https://discord.gg/wYSDCaRSZw">Join our official server</a>
</div>
</html

style.css样式文件

*{
    margin: 0;
    padding: 0;
}
@import url('https://fonts.googleapis.com/css?family=Archivo:400,700');
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');   
@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap');
/*Desktop*/

.container{
    height: 200vh;
    width: 100%;
    background-color: #90d5ec;
  background-image: linear-gradient(315deg, #90d5ec 0%, #fc575e 74%);

    background-position: center;
    background-size: cover;
    padding-left: 5%;
    padding-right: 5%;
    box-sizing: border-box;
    position: relative;
    
}
.title{
    font-family: 'Poppins', sans-serif;
    font-size: 72px;
    color: black;
    position: relative;
    top: 200px;
    margin-left: 200px;
    user-select: none;
}
/* Add a black background color to the top navigation */
.topnav {
    background-color: black;
    overflow: hidden;
  }
  
  /* Style the links inside the navigation bar */
  .topnav a {
    float: left;
    color: #0087ca;
    text-align: center;
    font-family: "Nunito", sans-serif;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  /* Change the color of links on hover */
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  
  /* Add a color to the active/current link */
  .topnav a.active {
   
    color: #0087ca;
  }
  .title .img{
      width: 400px;
      height: 400px;
      left: 600px;
      bottom: 250px;
      position: relative;
  }
  .infotit{
    font-size: 10px;
  }
  .hover-underline-animation a{
    display: inline-block;
    position: relative;
    color: #0087ca;
  }
  
  .hover-underline-animation a:after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 6px;
    bottom: 0;
    left: 0;
    background-color: #0087ca;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
  }
  
  .hover-underline-animation a:hover:after {
    transform: scaleX(1);
    transform-origin: bottom left;
  }


  /*Stuff not to be shown in desktop*/
  @media only screen and (min-width: 900px){

    .trust{
      font-size: 26px;
      font-family: 'Poppins', sans-serif;
      position: relative;
      
      text-align: center;
    }
    .info .quote{
      font-size: 36px;
      font-family: 'Poppins', sans-serif;
      position: relative;
      text-align: center;
      bottom: 100px;
    }
    .info .btn{
      display: inline-block;
      background: linear-gradient(45deg, #87adfe, #ff77cd);
      border-radius: 6px;
      padding: 10px 20px;
      box-sizing: border-box;
      text-decoration: none;
      color: #fff;
      box-shadow: 3px 8px 22px rgba(94,28,68.0.15);
      position: relative;
      margin-left: 650px;
      bottom: 100px;
      
    
    
    }
    .info .quoto{
      text-align: center;
      font-family: 'Poppins', sans-serif;
      font-size: 36px;
      bottom: 50px;
      position: relative;
    }
    .info .h11{
      text-align: center;
      position: relative;
      bottom: 20px;
      font-family: 'Open Sans Condensed', sans-serif;
      font-size: 20px;
  
    }
    .info .h11 .h33{
      color: red;
    }
    .info .h11 .muchmore_txt{
      color: red;
    }
    .f_txt{
      font-size: 26px;
    }
    .more_txt{
      font-size: 26px;
    }
    .footer{
      font-family: 'Open Sans Condensed', sans-serif;
      text-align: center;
      background-color: gray;
      height: 100px;
    }
    
       

  }
  .anime {
    font-size: 5vw;
    cursor: cell;
    
    line-height: 5.5vw;
  }
  
  .anime {
    transition: color 3s;
    transition-delay: 1s;
    letter-spacing: -0.2vw;
  }
  
  .anime span:hover {
    transition: color 0s;
  }
  
  .anime span:nth-child(1n):hover {
    color: #9875E0;
  }
  
  .anime span:nth-child(2n):hover {
    color: #53FBDD;
  }
  
  .anime span:nth-child(3n):hover {
    color: #00A4DD;
  }
  .hideme
{
    opacity:0;
}





/*Mobile*/
@media screen and (max-width: 640px){
.title .img{
    display: none;
}
.title{
    font-size: 42px;
    position: relative;
    right: 95px;
    top: 100px;
    text-align: center;
}
.trust{
  font-size: 16px;
  font-family: 'Poppins', sans-serif;
  position: relative;
  top: 180px;
  text-align: center;
}
.info .quote{
  font-size: 26px;
  font-family: 'Poppins', sans-serif;
  position: relative;
  text-align: center;
}
.info .btn{
  display: inline-block;
  background: linear-gradient(45deg, #87adfe, #ff77cd);
  border-radius: 6px;
  padding: 10px 20px;
  box-sizing: border-box;
  text-decoration: none;
  color: #fff;
  box-shadow: 3px 8px 22px rgba(94,28,68.0.15);
  position: relative;
  margin-left: 120px;
  


}
.info .quoto{
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 26px;
}
.info .h11{
  text-align: center;
  position: relative;
  top: 20px;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 20px;
}
.info .h11 .h33{
  color: red;
}
.info .h11 .muchmore_txt{
  color: red;
}
.footer{
  font-family: 'Open Sans Condensed', sans-serif;
  text-align: center;
  background-color: gray;
  height: 100px;
}
.anime {
  font-size: 8vw;
  cursor: cell;
  
  line-height: 5.5vw;
}

}

1 个解决方案

解决方案1
 0  2021-11-01 06:28:33

Change it to将其更改为

    <link type="text/css" rel="stylesheet" href="/css/style.css">

express.static is configured to serve static content from public folder So the correct path to server static file is to start with '/' express.static 配置为从公共文件夹提供静态内容因此服务器静态文件的正确路径是以“/”开头

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Express.js、CSS 未链接到 Ejs 文件 - Express.js, CSS not linking to Ejs file express.js中sendFile HTML文件中的错误 - error in sendFile HTML file in express.js 使用 express.js 打开 HTML 文件 - opening HTML file using express.js 使用express.js提供html文件以及脚本，css和图像 - Using express.js to serve html file along with scripts, css, and images 使用Vue.js和express.js交付HTML文件 - Deliver Html file using Vue.js and express.js 在 Express.js 中使用 res.sendFile() 渲染 HTML 文件 - Rendering HTML file with res.sendFile() in Express.js 我的html文件未响应express.js应用程序中的ajax请求 - My html file is not responding to ajax request in express.js application 获取文件Express.js - GET file Express.js Express.js文件上传 - Express.js File Uploads 在 Express.js 中下载文件 - Downloading a file in Express.js
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM