Nodejs: Comment faire revenir les différents types de contenu avec la même réponse (texte et image)?

J'essaie d'apprendre à nodejs et j'ai pensé que la meilleure façon de le faire serait d'essayer de faire des trucs sans l'aide d'exprimer ou de toute autre non-modules de base. Je suis coincé à essayer de faire un peu de texte et une image pour être livré en même temps. Le code que j'essaie est:

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

var server = http.createServer(function(request,response) {

    fs.readFile('my_pic.jpg', function(error, file) {
        response.writeHead(200, {'content-type':'text/html'});
        response.write('<p>hi there!</p>');

        response.writeHead(200, {'content-type':'image/jpg'});
        response.write(file, 'image');

        response.end();
    });

});

var port = process.env.PORT || 8080;

server.listen(port, function() {
    console.log('Listening on port ' + port);
});

Idéalement, devrait être livré est:

<html>
<body>
<p>hi there</p>
<img src='my_pic.jpg'/>
</body>
</html>

Mais au lieu de cela, rien n'apparaît.

J'ai essayé de mettre une réponse.fin() après avoir écrit "salut", qui affiche le texte, et après que j'ai essayé de permuter les endroits du texte et de l'image (en-têtes inclus), qui affiche la photo, mais je ne peux pas comprendre comment obtenir à la fois pour afficher simultanément, comme sur une vraie page web.

Pouvez-vous expliquer comment mettre à différents types de contenus sur la même page web - faire dont ils ont besoin pour être des réponses différentes? Quelque chose que je suis tombé sur une autre question:

nodejs - Comment lire et de sortie d'image jpg?

Quelque chose comme ça ressemble à la solution, mais je ne peux pas comprendre comment l'appliquer à ma situation (je n'ai pas beaucoup d'expérience dans le côté serveur de choses.)

Merci beaucoup

EDIT: j'ai travailler à partir de user568109 réponse:

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


var server = http.createServer(function(request,response) {
fs.readFile('my_pic.jpg', function(error, file) {

    var imagedata = new Buffer(file).toString('base64');

    response.writeHead(200, {'content-type':'text/html'});
    response.write("hi there!<img src='data:my_pic.jpg;base64,"+imagedata+"'/>");
    response.end();

    });

});

var port = process.env.PORT || 8080;

server.listen(port, function() {
    console.log('Listening on port' + port);
});

Cela ressemble à beaucoup de travail dans l'incorporation des images - si je voulais mettre plus d'une image, je dois juste garder l'imbrication de ces filestream rappels?

J'ai aussi essayé de cette façon mais ça ne fonctionne pas:

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

var server = http.createServer(function(request,response) {

    response.writeHead(200, {'content-type':'text/html'});
    response.write("hi there!<img src='my_pic.jpg'/>");
    response.end();

});

var port = process.env.PORT || 8080;

server.listen(port, function() {
    console.log('Listening on port' + port);
});

Je n'étais pas sûr si c'est ce que les gens voulait dire par la ligne de

response.write('<img src="my_pic.jpg"/>')

car le serveur ne semble pas être en faire une autre demande en mon nom pour aller chercher l'image? C'est juste montrant une fracture de l'image de l'icône.

On dirait que vous essayez de caser 2 requêtes HTTP sur une réponse. Vraiment, vous devriez tout simplement écrire le response.write('<img src="my_pic.jpg"/>'); et puis le navigateur télécharge le code HTML d'abord et ensuite faire une demande distincte pour le télécharger my_pic.jpg
On dirait que vous voulez envoyer un multipart réponse - comme c'est étrange. Je ne sais pas si n'importe quel navigateur peut le manipuler. La réponse doit être interprété côté client, je pense.
double possible de Construire Multi-partie de la réponse http à l'aide de node.js

OriginalL'auteur xdl | 2013-02-14

  1. 3

    Si vous ne response.write('<img src="my_pic.jpg"/>'); comme mentionné ci-dessus le fichier image sera envoyé uniquement lorsque le navigateur envoie OBTENIR de l'image. Il serait devenu multi-partie de la demande.

    Ou vous pouvez le faire comme ceci. Il est possible d'envoyer votre image sous forme binaire en HTML. Utilisation :

    <img src="data:image/gif;base64,imagedata">

    où les données images est un encodage base64 d'image gif. Afin de ce faire, dans node.js :

    //Write text in response.
content = get-image-file-contents;     //store image into content
imagedata = new Buffer(content).toString('base64');    //encode to base64
response.write('<img src="data:image/gif;base64,'+imagedata+'">');//send image
response.end();

    Vérifier ici pour corriger la conversion d'image NodeJS base64 image de codage/décodage pas assez de travail

    Cela envoie une réponse qui l'envoie à la fois du texte et de l'image. Seulement un en-tête est nécessaire pour la réponse response.writeHead(200, {'content-type':'text/html'});

    Salut user568109, j'ai eu l'image à charger à l'aide de votre deuxième méthode, et j'ai édité ma question d'inclure ce code. Cependant, je ne suis pas sûr de la façon d'obtenir votre première méthode de travail - j'ai aussi inclus le code dans mon édité question, était-ce ce que vous vouliez dire par la ligne de réponse.write('<img src="my_pic.jpg"/>');? Merci beaucoup.
    La première était juste un exemple, si vous voulez l'utiliser dans une page HTML. C'est ainsi que je incorporer une image dans la page HTML. Ce dernier était le code Javascript que vous pourriez utiliser dans le nœud.

    OriginalL'auteur user568109

  2. 1

    Vous ne pouvez écrire une valeur d'un en-tête, de sorte que le deuxième en-tête est l'écrasement de la première. Deux solutions sont

    1. écrire une url de l'image dans le html sera légèrement plus lent pour l'utilisateur (qui a besoin d'une requête http pour récupérer l'image), mais selon le cas d'utilisation de ce qui est normalement acceptable et très simple à mettre en œuvre
    2. convertir l'image à un data-uri de la chaîne et de les inclure dans le code html comme la source de l'image. Le plus compliqué à mettre en œuvre que la première approche ( je ne sais pas du tout bibliothèques pour faire la conversion en nœud) et avec négligeables avantages.

    OriginalL'auteur wheresrhys