Image qui ne se charge pas

**CoreDumpedped** · 01/08/2016, 15h47

Bonjour,
Je suis débutant en développement web,et j'essaye d'afficher dynamiquement une page web tout simple composé d'un texte,d'une image d'arriere plan et un gif par dessus.
J'ai écrit cette page en html et elle marche trés bien,mais quand je la génére via du javaScript et nodeJS,la page qui se charge n'affiche pas l'image...
pourquoi?problème de chemin d’accès depuis localHost?
Voici mon code js:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
var http = require('http');
var server = http.createServer(function(req, res) {
    res.writeHead(200, {"Content-Type": "text/html"});
    res.write('<!DOCTYPE html>'+
	'<html>'+
	   ' <head>'+
	        '<meta charset="utf-8" />'+
	         '<style>'+
	         ' body {'+
	           ' color:black;'+
	           'background-color:white;'+
	          '  background-image:url(\"backgroundVIT.png\");'+
	           ' background-repeat:no-repeat;'+
	           ' background-position:center center;'+
	           ' background-attachment:fixed;'+
	           ' } 	'+
	       ' IMG.loader {'+
	        '    display: block;'+
	         '   margin-left: auto;'+
	          '  margin-right: auto }'+
	    	'	h1'+
	    '		{'+
	   ' 		    font-weight: bold;'+
	   ' 		    text-align:center;'+
	'		    }'+
	  '      </style>'+
	   '     <title>IT-SHOW</title>'+
	 '   </head>'+
	'    <body>'+
	   ' 	<h1> APPLICATION LOAD...</h1>'+
	  '   <IMG class="loader" src="loader2.gif" >'+
	  '    </body> '+
	'</html>'
);
 
    res.end();
 
});
 
server.listen(8080);

**sekaijin** · 01/08/2016, 15h50

ouvre ton navigateur
affiche la source de la page (dans le navigateur)
compare le HTML reçu par le navigateur avec le fichier statique qui marche

A+JYT

**CoreDumpedped** · 01/08/2016, 15h53

je l'ai fait,il me génère la bonne page html, si je l’exécute comme sa,la page s'affiche correctement...

**melka one** · 02/08/2016, 10h49

jour

indique le repertoire ou se trouve l'image

**CoreDumpedped** · 02/08/2016, 12h04

Bonjour,
l'image se trouve dans le même répertoire que ma page web.
j'ai essayé avec ./image.png ainsi que le chemin complet:

background-image:url("C:/Users/remi/Pictures/BackGround.png");

Aucun des deux fonctionnes...
Une idée?

**melka one** · 02/08/2016, 16h02

on peut toujour convertir l'image en base 64

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var fs = require('fs');
var image = fs.readFileSync('/loader2.gif');
var encondedImage = new Buffer(image).toString('base64');

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

'<img class="loader" src="data:image/jpeg;base64,'+encondedImage+'" >'+

mais il y a peut etre plus simple

**NoSmoking** · 02/08/2016, 16h08

Bonjour,
as tu essayé d'utiliser __dirname ?

https://nodejs.org/api/globals.html#globals_dirname

Image qui ne se charge pas

JavaScript

Vue hybride

Discussions similaires

Partager

Partager