图像不加载到本地机器上答案

【问题标题】：Images don't load on local machine图像不加载到本地机器上
【发布时间】：2020-10-07 13:01:57
【问题描述】：

当我将网站上传到Github 时，它可以很好地加载 css、js、imgs，但是当我在本地服务器上启动它时，它只加载没有 css、js 和图像的 html。

因为它没有加载并且我在互联网上阅读了一些内容，所以我决定添加“公共”文件夹并将所有内容打包在里面。我也在 server.js 中添加了

app.use(express.static('public'));

错误：对于 CSS 拒绝应用来自 'http://localhost:3000/styles.css' 的样式，因为它的 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查。

对于图片 加载资源失败：服务器响应状态为 404（未找到）

JS 函数也不行。

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

app.use(express.static('public'));

app.get("/", function(req,res){    
res.sendFile(__dirname  + "/index.html");
});

app.listen(3000, function(){

});

index.html

       
    <meta charset=“UTF-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
   
    <link rel="stylesheet" href="/styles.css">
    <title>Workout Programmer</title>
    <!-- <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding:wght@700&display=swap" rel="stylesheet"> -->
    
</head>

我尝试将路径更改为 ./ 或 ../ 或不使用“/”或 /public 等...没有任何效果。

在底部 index.html

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

图片链接：

<img src="/images/workoutman.png" alt="workoutman"

所有文件都存储在名为“public”的文件夹中，图像在 public/images 中

【问题讨论】：

这能回答你的问题吗？ Node/Express - Refused to apply style because its MIME type ('text/html')
在 server.js 中我已将：app.use(express.static('public')); 更改为 app.use(express.static(__dirname)); 它在中途解决了问题。图像和 JS 现在加载，但 CSS 仍然无法正常工作。

标签： javascript html css node.js

【解决方案1】：

好的，我终于解决了这个问题。在我使用的文件 server.js 中

app.use(express.static(__dirname));

其他问题是 styles.css 实际上并不像我想的那样在公用文件夹中。 VisualStudio 界面让我有点失落。要找出它，请给我这个提示： https://stackoverflow.com/a/60821720/14340165

【讨论】：