當我訪問另一個頁面時，影像，徽標和圖示不顯示，但是當我回到主頁時，影像顯示完美
在這個專案中，我使用了 pug 模板引擎和 express.js
下面的鏈接是專案檔案夾和檔案的影像
專案檔案夾和檔案影像
下面的鏈接是主頁的圖片
影像、徽標和圖示顯示完美，但在登錄和注冊頁面上，我遇到了影像問題
主頁
下面的鏈接是登錄和注冊頁面的影像
在此頁面上，不顯示影像問題！
登錄和注冊頁面
以下部分是 express.js 代碼
const express = require("express");
const app = express();
const port = 80;
const path = require('path');
// <------------------ define static mode ------------------>
*// app.use(express.static('public'));*
const staticpath = path.join(__dirname, '../public');
app.use(express.static(staticpath));
// <------------------ Adding pug engine in express ------------------>
app.set('view engine', 'pug');
app.set('views', path.join(__dirname, '../view'));
app.get('/', (req, res)=>{
res.status(200).render('index.pug');
})
app.get('/loginandsingup.pug', (req, res)=>{
res.status(200).render('loginandsingup.pug');
})
app.listen(port, ()=>{
console.log(`application had started successfully on port ${port}`)
})
以下部分是主頁的哈巴狗代碼
.img#menu-icon
img(src="images/menu-icon.svg", alt="Menu icon")
#navbarSupportedContent.collapse.navbar-collapse
.logo
a(href="/")
img(src="images/logo.png", alt="entre logo")
ul.navUl.navbar-nav.mb-2.mb-lg-0
li#nav-item-1.navList.nav-item
a.navLink.nav-link.text-dark(href="#") Home
li#nav-item-1.navList.nav-item
a.navLink.nav-link.text-dark(href="#") Order
以下部分是登錄和注冊頁面的 pug 代碼
.img#menu-icon
img(src="./menu-icon.svg", alt="Menu icon")
#navbarSupportedContent.collapse.navbar-collapse
.logo
a(href="/")
img(src="./logo.png" alt="entre logo")
ul.navUl.navbar-nav.mb-2.mb-lg-0
li#nav-item-1.navList.nav-item
a.navLink.nav-link.text-dark(href="#") Home
li#nav-item-1.navList.nav-item
a.navLink.nav-link.text-dark(href="#") Order
這個問題有什么解決方案嗎？
uj5u.com熱心網友回復：
1.在app.js上面你設定的視圖引擎中添加這個中間件
app.use(express.static(path.join(__dirname, "public")));
2. 檔案夾結構
|__public/
|__ css/
|__ css files...
|__ js/
|__ js files...
3.以這種方式匯入
現在您將路徑設定為公共目錄，您必須在匯入時提供路徑公共檔案夾
<link rel="stylesheet" href="/css/main.css" />
筆記：-
根中的另一件事公共目錄和app.js檔案也應該在根中，如果你想app.js在 src 中，然后相應地設定路徑
您現在應該已經準備好訪問 CSS 或任何檔案
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/371486.html
上一篇：404功能正常但顯示不正常