Affichage des images dans le HTML + Nodejs
Je suis nouveau sur nodejs. Je veux créer un site web simple qui comporte 3 pages. Dans chaque page que je veux afficher une image pour rendre les pages look uniforme.
Mon code ressemble à ceci:
/**
* Module dependencies.
*/
var express = require('express');
var routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');
var fs = require('fs');
var mail = require("nodemailer").mail;
/*List of variables*/
var app = express();
//all environments
app.set('port', process.env.PORT || 3000);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.json());
app.use(express.urlencoded());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
app.get('/main', function(req, res) {
fs.readFile('./home.html', function(error, content) {
if (error) {
res.writeHead(500);
res.end();
}
else {
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(content, 'utf-8');
}
});
});
/* After this I have code for post event - all these navigation works perfectly fine*/
dans home.html
fichier j'ai une image à afficher:
/*Header part of HTML file*/
<body>
<img class="logo" src="./Heading.png" alt="My_Logo">
console.log (src);
<h1 class="center">Welcome to message reprocessing</h1>
</br>
</body>
Cette image n'est pas affiché dans mon navigateur. Quand je vérifie ma console, j'ai cette erreur:
GET http://localhost:3000/Heading.png 404 (Not Found)
S'il vous plaît aider, merci
- De la console.journal(...) l'état de ne pas assez travailler de cette façon... Vous ne pouvez pas ajouter du javascript html. Il doit être dans un <script></script> tag et doit être exécuté d'une certaine façon. Aussi, pourriez-vous poster votre disposition des répertoires ici? Êtes-vous sûr que vous avez à la Tête.png dans votre répertoire public?
- Est le
Heading.png
situé dans le même dossier quehome.html
est?
Vous devez vous connecter pour publier un commentaire.
Merci pour vos réponses.J'avais essayé d'utiliser le chemin absolu déjà avec pas de chance. Cependant, l'un de mes ami a suggéré comme ci-dessous:
et de garder la
Heading.png
fichier danspublic/images
répertoire.Merci à tous.
D'accord, ce n'est pas avec express.js mais voici un extrait de mon code qui gère les images et les scripts javascript externes, mais possède une protection:
Ce en supposant que vous avez votre app.js et index.html dans votre racine, vous pouvez avoir des dossiers comme /css, /img /js etc. Mais l'app.js et le contenu à l'intérieur de votre /dossier caché est impossible à atteindre, mais les fichiers dans la racine de votre est toujours accessible.
Si vous voulez une solution rapide, faire ceci: au lieu de cette
<img class="logo" src="./Heading.png" alt="My_Logo">
utilisation:Ne fonctionne toujours pas?
vérifiez l'image de l'orthographe, de l'extension de fichier(png) parce que png et PNG sont différents en live server(sensible à la casse).
et de vérifier
trop