为什么我不能加载CSS文件或图像

a64a0gku 于 2023-01-14 发布在其他

关注(0)|答案(2)|浏览(101)

我正在学习如何制作网站，我遇到了一个问题，我找不到解决方案，我希望你能帮助我。我不能连接CSS文件或网站图标的图像，但如果我使用它的工作。我使用Node.Js为后端与EJS为前端。
这就是我如何连接图像：

<!DOCTYPE html>
<html lang="eng">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="icon" type="image/png" sizes="32x32" href='src/images/favicon-32x32.png'>

    <title>Title</title>

这是CSS文件：

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

</head>
<body>

<h1 class="ws_title">Title</h1>

我的css文件和html模板在同一个目录中：src/views/project所有的图像都在src/images中
我尝试使用不同的浏览器，但不起作用
你知道问题出在哪里吗？
更新：我刚发现EJS必须使用expression.static，但是我不明白我应该用它做什么，你能解释一下吗？

css

来源：https://stackoverflow.com/questions/75108742/why-i-cant-load-css-file-or-images

2条答案

按热度按时间

vwkv1x7d1#

尝试检查href中的/src/images/favicon-32x32.png路径

赞(0）回复(0）举报 2023-01-14

zzoitvuj2#

我克隆了你的项目做了些调整。
1.将images目录重命名为public目录。
1.将style.css文件从/views/pocketsage/移动到public目录。
1.添加server.js文件Serving static files，该行代码app.use("/", express.static(path.join(__dirname, "public")));

server.js相加path，const path = require("path");
1.将href更改为<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
main.ejs更改src<img src="avatar.png" alt="" class="info-card__photo" />
1.重新启动Server和浏览器ctrl+f5，瞧。

文件夹和文件server.js和main.ejs代码片段以及VScode的terminal输出：