Изображения на моем веб-сайте отображаются по-разному при использовании моего локально размещенного сервера узлов по сравнению с использованием моего удаленного размещенного сервера
На моем локальном компьютере изображения отображаются в виде текста / обычного типа, и все, кажется, работает отлично. Однако на моем удаленном сервере они отображаются как 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');
Извинения за большую стену текста, и заранее спасибо за любую помощь:)