nodeJS,web-server文件路径问题 5C

小白求问,about文件中的图片无法显示

文件路径如下:
src
---app.js
public
---css
------style.css
---img
------robot.png
templates
---about.hbs
---help.hbs
---index.hbs
about.hbs文件代码:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <h1>{{title}}</h1>
    <img src="../public/img/robot.png"><!--- 注意文件路径名,否则图片无法显示---->
    <p>Created by {{name}}</p>

</body>
</html>

在app.js中

const path = require('path')
const express = require('express')
const hbs = require('hbs');
const app = express()

const publicDirectoryPath = path.join(__dirname, '../public')
const viewsPath = path.join(__dirname, '../templates')

app.set('view engine', 'hbs')

app.use(express.static(publicDirectoryPath)) //静态文件
//app.set('views', publicDirectoryPath)//动态文件
app.set('views', viewsPath)


app.get('', (req, res) => {
    res.render('index', {
        title: 'Weather App',
        name: 'Andrew Mead'
    })
})

app.get('/about', (req, res) => {
    res.render('about', {
        title: 'About Me',
        name: 'Andrew Mead'
    })
})

app.get('/help', (req, res) => {
    res.render('help', {
        title: 'Help',
        helpText: 'Helpful Text here'
    })
})


app.listen(3000, () => {
    console.log('server is up on port 3000')
})

2个回答

直接img/robot.png就可以了,/about 你可以把他看做把about.html文件放在了public里面

u012308481
nihaoye000 可能这里/img/robot.png这种好点
4 个月之前 回复
u012308481
nihaoye000 哦,可能我想错了,其实就是一个相对当前页面的路径的问题../就是回到上一级路径,就是public下的路径了
4 个月之前 回复
u012308481
nihaoye000 哦,可能我想错了,其实就是一个相对当前页面的路径的问题../就是回到上一级路径,就是public下的路径了
4 个月之前 回复
yuAriellexi
yuAriellexi 我发现使用<img src="../img/robot.png">也可以。很费解。请教,我给您增加悬赏币。感谢!
4 个月之前 回复
yuAriellexi
yuAriellexi 什么也没有改动,只是重运行了一下app.js 现在可以了,刚才也有重新运行,但是不行。不知道为什么
4 个月之前 回复
yuAriellexi
yuAriellexi 改了一下,还是不行。请教一下,app.set('views', viewsPath), app.use(express.static(publicDirectoryPath))同时使用,现在css效果无法显示出来
4 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问