Question

我是HTML / JS的新手，我正在尝试为uni项目制作一个Web应用程序。我用express来设置我的服务器并加载一个HTML页面。 HTML文件加载其他文件（图像，css）以正确显示自身。当然，由于这些文件不在本地主机服务器上，而是在我的项目文件夹中的计算机上，因此无法找到它们来显示它们。

http://localhost:8080/bootstrap.css Failed to load resource: the server responded with a status of 404 (Not Found)

我需要以某种方式上传它们吗？如果是的话，我将如何在JS中做到这一点？

编辑更多信息：这就是我的项目的样子： https://gyazo.com/ef316cf306e53f4b7caec39c4e103e66

并且在vue中（法语视图）我有这个： https://gyazo.com/f3ba3ece416a8ea7dda705c3b1366a3a

我通过节点运行app.js来启动应用程序并使用以下代码加载我的html：

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


app.get('/',function(req,res){
      res.sendFile(path.join(__dirname+'/vue/accueil.html'));
});

在accueil文件中：

<!DOCTYPE html>
 <meta charset="utf-8">
    <link href="bootstrap.css" rel="stylesheet">
    <style type="text/css">
      [class*="col"] { margin-bottom: 20px; }
      img { width: 100%; }
    </style>
  <title>ACCUEIL</title>
</head>
<body> etc...

和

<div class="row">
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/concert.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/u2.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/arianagrande.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/adele.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/imaginedragons.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/thecure.jpg" alt="Tigre"></div>

        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/coldplay.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/onerepublic.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/calvin.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/alicia.jpg" alt="Tigre"></div>
        <div class="col-xs-4 col-sm-3 col-md-2"><img src="images/wham.jpg" alt="Tigre"></div>
    </div>

我是否需要为每个图像和css文件制作app.get？

Answer 1

如果您的文件不在localhost文件夹中，那么您“无法”将它们加载到代码中。（你可以，但不应该）

您需要在localhost文件夹中包含所有内容，例如，如果您将html放在名为“myfirstwebsite”的文件夹中，则需要将该文件夹中的所有文件都包含在内。

例如：

 myfirstwebsite
 |-index.html
 |-CSS
 |--bootstrap.css
 |-IMG
 |--welcome.jpg
 |-JS
 |--script.js

然后在HTML中加载您需要显示的所有文件，例如您的脚本：

<script type="text/javascript" src="js/script.js"></script>

将加载“script.js”。与bootstrap相同，如果你的“myfirstwebsite”文件夹中的css文件夹中有引导程序，那么你可以用以下方法调用它：

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

你应该能够立即加载它们。

永远不要将文件加载到服务器文件夹之外，例如“file：// c：/documents/bootstrap.css”，因为如果您需要将站点移动/上传到PC外的其他位置，那么，您将有很多问题。

如何在localhost上加载css和bootstrap文件

1 个答案: