Изображения используются по-разному при использовании localhost и на моем сервере - PullRequest
0 голосов
/ 15 мая 2019

Изображения на моем веб-сайте отображаются по-разному при использовании моего локально размещенного сервера узлов по сравнению с использованием моего удаленного размещенного сервера

На моем локальном компьютере изображения отображаются в виде текста / обычного типа, и все, кажется, работает отлично. Однако на моем удаленном сервере они отображаются как text / html, что означает, что они не отображаются в виде картинок. Странно то, что браузер, похоже, распознает, что это должны быть изображения, и показывает этот маленький значок изображения в левом верхнем углу области, которую изображение должно показывать. Это значки, которые браузеры показывают, когда они не могут отобразить изображение.

При открытии любого из этих изображений с помощью щелчка правой кнопкой мыши на значке и открытия (или открытия на вкладке сети в функции проверки цветов) оно отображается на простой 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');

Извинения за большую стену текста, и заранее спасибо за любую помощь:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...