在NodeJS提供的静态html中显示本地图像

Question

我有一个呈现index.html的NodeJS应用程序，但我无法通过index.html找到它所在文件夹中的图像。

以下是index.js

的内容

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get ('/', function(req, res){
    res.sendFile(__dirname + '/index.html');
});
http.listen(80, function(){
    console.log('listening on *:80');
});

它成功地为index.html服务，但我提供的所有图像都是断开的链接。 以下html不起作用

<img src="img/myimage.png">

我的文件结构是

myApp - folder
    index.js
    index.html
    img - folder
        myimage.png

我尝试过多种变体，例如

<img src="/img/myimage.png">
<img src="./img/myimage.png">

我还尝试将图片直接放在带有index.html的app文件夹中并尝试

<img src="myimage.png">

但是图像的链接仍然存在。

Answer 1

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

如果图像在名为“图像” 的文件夹中，并且要指向文件夹中的图像为“ img / myimage.png” ，则使用这个：

app.use('/img', express.static(__dirname + '/Images'));

这样，您还可以将实际的图像文件夹名称保留为私有。

Answer 2

我能够通过更改

解决问题

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

到

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

然后我添加了

app.use(express.static(__dirname + '/img/'));

Answer 3

您的意思是浏览器中的链接断开了吗？所以浏览器无法打开index.html中呈现的链接？

浏览器可能需要完整的图像路径..看起来你的节点服务器似乎没有发送它传递给浏览器的index.html文件中的完整路径..看看那个.. < / p>

Answer 4

  

在Express应用程序中将使用的静态文件声明中，必须将文件（图像，歌曲，文件）放入 public 文件夹中。然后，您的express和ejs将显示 public 文件夹中的文件作为该文件的根。

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

app.use(express.static('public'));
app.set("view engine", "ejs");

app.get("/", function(req, res){
  res.render("main");
});

app.listen(3000, function(req, res){
  console.log("Auth server started!");
});

EJS文件夹就在这里。

<h1>Secret Page!</h1>

<img src="anna.jpg"/>

<img src="https://i.imgur.com/NcXbX08.jpg" alt="">

毕竟，重新加载您的nodejs应用。