Je travaille sur une petite application web et je veux la rendre aussi propre que possible (sans api ni framework * pas d'express).

Et dès que j'ai commencé, j'ai rencontré mon premier problème.

Une fois que je rends un fichier html à l'aide de nodejs, les références aux fichiers en général que vous appelez de l'intérieur du html ne sont "pas là" ?

OBTENIR http://localhost:3000/Footage/UserTemplateIcon.png 404 (non trouvé)

Si j'essaie d'exécuter le code html en tant que fichier individuel (sans nœud), mon image est trouvée, mais pour une raison quelconque, pas avec nodejs

Ceci est ma structure de fichiers

enter image description here

Mon code nodejs :

const http = require('http'),
    port = 3000,
    fs = require('fs'),
    events = require('events'),
    util = require('util');
var myEmitter = new events.EventEmitter();


const server = http.createServer((req, res) => {
    if(req.url === "/"){
        res.statusCode = 200;
        res.setHeader('Content-Type', 'text/plain');
        res.end("Main page");

    } else 
    if(req.url === "/feed"){
        res.statusCode = 200;
        res.setHeader('Content-Type', 'text/html');
        var myReadStream = fs.createReadStream(__dirname + '/src/Feed/index.html', 'utf8');
        myReadStream.pipe(res);
    }
    else {
        res.statusCode = 404;
        res.setHeader('Content-Type', 'text/html');
        var myReadStream = fs.createReadStream(__dirname + '/src/404/index.html', 'utf8');
        myReadStream.pipe(res);
    }
});

server.listen(port, () => {
    console.log(`Server running on ${port}`);
})

Et mon html

<html>
<head>
   <div class="headerUserIcon"><img src=".\Footage\UserTemplateIcon.png"></div>
</head>
<body>
</body>
</html>

J'ai trouvé plusieurs solutions avec express où les gens disent que vous devez servir vos fichiers statiques à partir d'express quelque chose comme

app.use(express.static('src'));

Mais j'aimerais le faire sans express.

*mise à jour : l'ajout de \.\ avant le lien vers mon fichier me renvoie cette erreur

Non autorisé à charger la ressource locale : file://.//Footage/UserTemplateIcon.png

1
Ionut Eugen 19 mars 2019 à 00:59

2 réponses

Meilleure réponse

Votre programme contient du code comme celui-ci :

if(req.url === "/"){
    /* send something */
} 
else if(req.url === "/feed"){
    /* send something  else*/
}
else {
   /* send an error */
}

Si vous voulez envoyer d'autres fichiers (.pngs par exemple), chacun d'eux doit apparaître dans cette cascade if/else if, ou dans une instruction switch, ou dans une sorte d'analyse de req.url. Un serveur http à nœud simple ne sait rien des systèmes de fichiers. C'est totalement dépouillé. (C'est différent de nginx ou d'apache de cette façon.)

Express fournit un cadre agréable pour enseigner aux serveurs html de nœuds les systèmes de fichiers, les types de contenu, les routes, les flux, les canaux et le reste. Sans express, vous devez enseigner vous-même au serveur html vos fichiers png, css, js, etc.

4
O. Jones 18 mars 2019 à 22:16

Le <img src=".\Footage\UserTemplateIcon.png"> ne fonctionnera pas dans votre code HTML car la plupart des navigateurs ne vous permettront pas de charger une image via le protocole file://.

Pour résoudre ce problème, vous devrez configurer un point de terminaison HTTP qui servira \Footage\UserTemplateIcon.png - il peut s'agir du même serveur que votre application Web ou via une application distincte (c'est-à-dire python -m SimpleHTTPServer).

P.S. Je recommande fortement d'utiliser express pour servir des fichiers statiques car cela correspond directement à votre cas d'utilisation.

2
jakemingolla 18 mars 2019 à 22:07