使用localhost和在服务器上时,图像的提供方式有所不同

时间:2019-05-15 17:52:02

标签: html node.js express

使用本地托管的节点服务器与使用远程托管的服务器时,我网站上的图像显示方式有所不同

在我的本地托管计算机上,图像以文本/纯文本形式显示,并且一切似乎都正常运行。但是,在我的远程服务器上,它们显示为text / html,这意味着它们不显示为图片。奇怪的是,浏览器似乎识别出这些应该是图像,并在应该显示图像的区域的左上方显示了小图片图标。浏览器无法显示图像时显示的图标。

通过右键单击图标并打开(或通过chromes inspect功能的“网络”选项卡打开)打开这些图像中的任何图像,它会显示一个纯HTML页面,显示“您好!”。我假设最初是由我来建立网站的,尽管发送该网站的源代码已久。

直接通过url访问图像也可以做到这一点。根文件是__dirname / images / image.jpg。 所以,

server-url/images/spider.jpg 

给“你好!”和

localhost:3000/images/spider.jpg 

将提供图像。

有一幅图片可以链接到网站外部的一张外部图片,该图片可以在本地和服务器上完美显示,并显示为jpeg类型。

我尝试过将图像文件夹设置为静态,更改图像,创建数据链接,以及我想到的多种写方法。

两个服务器源代码之间的唯一区别是,我的远程服务器同时运行https和http服务器,而我的本地计算机运行沼泽标准的http服务器。

这是我在本地和远程服务器上用于提供图像的nodejs / express代码。

//images
app.get('/images/jag.jpeg', function (req, res) {
    res.status(200);
    res.sendFile(__dirname + '/images/jag.jpeg');
});

app.get('/images/landscape.jpeg', function (req, res) {
    res.status(200);
    res.sendFile(__dirname + '/images/landscape.jpeg');
});

app.get('/images/night.jpg', function (req, res) {
    res.status(200);
    res.sendFile(__dirname + '/images/night.jpg');
});

app.get('/images/space.jpg', function (req, res) {
    res.status(200);
    res.sendFile(__dirname + '/images/space.jpg');
});

app.get('/images/spider.jpg', function (req, res) {
    res.status(200);
    res.sendFile(__dirname + '/images/spider.jpg');
});

这是html代码

<div id = "slide-body">
    <div class = "container" id = "container">
        <ul>
            <li class = "active">
                <img src = "link-to-external-picture"></li>
            <li><img src = "images/jag.jpeg"></li>
            <li><img src = "images/landscape.jpeg"></li>
            <li><img src = "images/night.jpg"></li>
            <li><img src = "images/space.jpg"></li>
            <li><img src = "images/spider.jpg"></li>
        </ul>
    </div>
</div>

由于代码中唯一的区别在于服务器的设置方式,因此这是这些代码。

远程服务器

const fs = require('fs');
const http = require('http');
const https = require('https');
const express = require('express');

const app = express();

// Certificate
const privateKey = fs.readFileSync('/etc/letsencrypt/live/serverurl/privkey.pem', 'utf8');
const certificate = fs.readFileSync('/etc/letsencrypt/live/serverurl/cert.pem', 'utf8');
const ca = fs.readFileSync('/etc/letsencrypt/live/serverurl/chain.pem', 'utf8');

const credentials = {
    key: privateKey,
    cert: certificate,
    ca: ca
};

//req and res stuff

// Starting both http & https servers
const httpServer = http.createServer(app);
const httpsServer = https.createServer(credentials, app);

httpServer.listen(80, () => {
    console.log('HTTP Server running on port 80');
});

httpsServer.listen(443, () => {
    console.log('HTTPS Server running on port 443');
});

本地服务器

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

var app = express();

//res and req stuff

app.listen(3000);
console.log('now listening on port 3000');

致歉,感谢您的帮助:)

0 个答案:

没有答案