Question

我是node.js中的新手，我刚刚根据socket.io示例进行了聊天。我在我的应用程序的索引上做了一个登录表单但是当我在localhost：3000上访问我的应用程序时，images和css不起作用。但是，当我直接在浏览器上启动index.html时，css和图像都已正确加载。

这是我申请的树： Tree view

这就是我在启动节点js服务器时看到的，并且我访问了localhost：myPort： index.html on localhost

index.html的负责人：

<meta charset="UTF-8">
<title>Khoya Talk</title>
<link rel="shortcut icon" href="public/assets/images/favicon.ico" type="image/x-icon">
<link rel="icon" href="public/assets/images/favicon.ico" type="image/x-icon">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<!-- Optional theme -->
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">-->
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="public/css/style.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

感谢您的帮助。

Answer 1

在所有公开之前添加// Put an id on your form and change the id below accordingly var idForm = 'form'; var form = $('#' + idForm); form.submit(function(e) { e.preventDefault(); var redirectTo = form.find('input').val(); switch(redirectTo) { case "INPUT_VALUE_EXAMPLE": window.location = 'YOUR URL HERE'; break; case "google" window.location = 'http://www.google.com' break; } });并且：

App.js

的index.html

app.use(express.static(__dirname + '/public'));

为所有道路做这个。图片中的<link rel="shortcut icon" href="/assets/images/favicon.ico" type="image/x-icon">属性：

src

Answer 2

在浏览器中加载页面时，请查看开发人员工具/调试器以查看发生的情况。

如果它找不到css（或图像），那是因为你需要像这样使用Express（在你的js文件中）：在顶部添加：

 var express = require("express");
 var app     = express();

然后添加包含以下内容的文件夹：

 app.use(express.static(__dirname + '/public'));

Answer 3

显然，您必须在静态目录中使用/

app.use(express.static(__dirname + '/public/'));

然后在您的CSS中：背景图片（'img / pic.png'）其中img是用于存储图像的文件夹，并确保它位于公用文件夹中。

希望有帮助。

node.js - images和css不工作

3 个答案: