顯示由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();

如果圖像在名為“ Images”的文件夾中，並且要指向該文件夾中的圖像為“ 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文件中發送完整路徑。.看一下..

Answer 4

在您將在明確應用程序中使用靜態文件的聲明，你必須把你的文件（圖片，歌曲，文件）到公共文件夾。 然后，你的快遞和EJS將展示來自公共文件夾文件作為該文件的根目錄。

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應用程序。