Простой способ импортировать изображение с рабочего стола в код JavaScript?

Question

Я пытаюсь выяснить, как импортировать изображение с моего рабочего стола в файл .js.

var express=require("express");

var http=require("http");

var app=express();
var img = new Image();
var div = document.getElementById('foo');

img.onload = function() {
    div.appendChild(img);
};

img.src = C:\Users\image location

http.createServer(app).listen(11111);

console.log('Express server listening on port 11111');

Answer 1

Ну, во-первых, этот код на стороне сервера, поэтому вы не можете использовать функцию document.getElementById.Теперь, если вы хотите отправить изображение клиенту, когда он запрашивает определенную конечную точку, это можно сделать довольно легко.

import fs from 'fs';
import express from 'express';
const app = express();
app.get('/sendImage', (req, res) => {
    const readStream = fs.createReadStream('path/to/image.jpeg');
    readStream.pipe(res);
});

На стороне клиента вы можете отобразить изображение, подобное этому

<img src='localhost:11111/sendImage' />

Answer 2

Использовать модуль встроенной файловой системы узла.

var fs = require('fs');

Пример, приведенный на W3schools.com :

fs.readFile('picture.jpg', function(err, data) {
    ...
    ...
});

Что касается вашего кода, DOMманипулирование JS не должно быть в коде на стороне сервера.Например:

var div = document.getElementById('foo');

Это следует переместить в файл на стороне клиента.

См. Этот ответ о переполнении стека об импорте изображений .