Affichage impossible d'une image dans une page HTML

Version imprimable

Bonjour

J'utilise une application CGI et le serveur web Apache24 à fin d'exécuter une page HTML.

Lorsque je clique sur la page xpage1.html contenant l'image AVD.png, cette dernière s'affiche normalement
par contre quand j'exécute l'URL ci-dessous l'image se réduit en icône.:(

des explications?
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <!DOCTYPE HTML public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <head> <title> Affichage d'une image</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> <img src="img/AVD.png" class="imageGauche" alt="Ma Photo" /img> <h1> </h1>  </body> </html>
Code:

1 2 3 4 5 6 procedure TWebModule.page1Request(Sender: TObject; ARequest: TRequest; AResponse: TResponse; var Handled: Boolean); begin AResponse.Contents.LoadFromFile('C:/Apache24/cgi-bin/xpage1.html') ; Handled:=true end;
URL:

Code:

Localhost/cgi-bin/ext.exe?webmodule=session&ActionVar1=page1

où:
ext.exe: exécutable CGI.

WebModule: CreateSession=True , DefActionWhenUnknown=True.

ActionVar1: valeur de ActionVar.

page1: nom de l'action.

session:

Code:

RegisterHTTPModule('session', TWebModule);

merci d'avance.

17/11/2016, 00h17
BeanzMaster

Salut un truc bête mais ta class CSS "imageGauche" il y a quoi dedans, de plus tu la déclare ou ? car la je vois rien. As tu d'autres fichiers CSS charger avant contenant une description de "imageGauche" différente ? Lorsque tu ouvres ta page directement dans ton navigateur tu obtiens quoi comme résultat ?

3 pièce(s) jointe(s)

Bonjour beanz
et merci pour ta réponse

Maintenant on va reproduire cet exemple original à fin d'éliminer toute confusion.
Là dessous (du site) il existe trois paragraphes de couleurs noires:

Le premier je l'ai déposé dans la page HTML.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE HTML public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
  <head>
    <title>photo</title>
    <meta name="author" content="Owner" >
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <link rel="stylesheet" type="text/css" href="C:/Exempleweb/styles.css"/>
     <script src="C:/Extjs/Extjs_factory/js/ext-base.js"></script>
<script src="C:/Extjs/Extjs_factory/js/ext-all-debug.js"></script>
  <script src="C:/ExempleWeb/functionImg.js"></script>
  </head>
  <body>
    <h1> photo </h1>
    <p>
    <a href="imgs/1.jpg" title="Afficher l'image originale"><img src="imgs/1_min.jpg" alt="Miniature" /></a>
    <a href="imgs/2.jpg" title="Afficher l'image originale"><img src="imgs/2_min.jpg" alt="Miniature" /></a>
    <a href="imgs/3.jpg" title="Afficher l'image originale"><img src="imgs/3_min.jpg" alt="Miniature" /></a>
    <a href="imgs/4.jpg" title="Afficher l'image originale"><img src="imgs/4_min.jpg" alt="Miniature" /></a>
    </p>
   <div id="overlay"></div>
  </body>
</html>

Le deuxième dans un fichier styles.css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#overlay {
    display : none; /* Par défaut, on cache l'overlay */
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    text-align: center; /* Pour centrer l'image que l'overlay contiendra */
 
    /* Ci-dessous, nous appliquons un background de couleur noire et d'opacité 0.6. Il s'agit d'une propriété CSS3. */
    background-color: rgba(0,0,0,0.6);
}
 
#overlay img {
    margin-top: 100px;
}
 
p {
    margin-top: 300px;
    text-align: center;
}

Le troisième dans le fichier FunctionImg.js

Code:

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
var links = document.getElementsByTagName('a'),
    linksLen = links.length;
 
for (var i = 0; i < linksLen; i++) {
 
    links[i].addEventListener('click', function(e) {
        e.preventDefault(); // On bloque la redirection
 
        // On appelle notre fonction pour afficher les images
        // currentTarget est utilisé pour cibler le lien et non l'image
        displayImg(e.currentTarget);
    });
 
}
 
function displayImg(link) {
 
    var img = new Image(),
        overlay = document.getElementById('overlay');
 
    img.addEventListener('load', function() {
        overlay.innerHTML = '';
        overlay.appendChild(img);
    });
 
    img.src = link.href;
    overlay.style.display = 'block';
    overlay.innerHTML = '<span>Chargement en cours...</span>';
 
}
 
document.getElementById('overlay').addEventListener('click', function(e) {
    // currentTarget est utilisé pour cibler l'overlay et non l'image
    e.currentTarget.style.display = 'none';
});

Manuellement les 4 images s'affichent normalement:
Pièce jointe 225103

mais exécutant l'URL voilà les résultats d'affichage

Pièce jointe 225099

... et de débogage par F12 de google chrome.

Pièce jointe 225100

Salut, bon alors le problème ne vient pas de ton programme Lazarus mais de la façon dont tu as organisé tes fichiers et de la configuration de ton serveur apache.

Premièrement tu devrais rassembler tes fichiers de la façon suivante et configurer Localhost dans apache comme suit :

- C:\Exempleweb\ = http:\\Localhost

* xpage1.html

- scripts\

- ExtJS\...
* functionImg.js

- styles\

* styles.css

- imgs\

* 1.jpg
* 2.jpg
*...

- cgi-bin\ pour ce dossier je suis pas sur qu'il doive se trouver sous localhost, sinon attention à la sécurité si tu passes en production

ensuite modifie ton fichier html et n'utilises pas de dossiers physiques en dehors du localhost:
Code:

1 2 3 4 5 6 7 8 9 10 11 <!DOCTYPE HTML public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <head> <title>photo</title> <meta name="author" content="Owner" > <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="styles/styles.css"/> <script src="scripts/Extjs/Extjs_factory/js/ext-base.js"></script> <script src="scripts/Extjs/Extjs_factory/js/ext-all-debug.js"></script> <script src="scripts/functionImg.js"></script> </head>
et dans ton fichier pascal :
Code:

1 2 3 4 5 6 procedure TWebModule.page1Request(Sender: TObject; ARequest: TRequest; AResponse: TResponse; var Handled: Boolean); begin AResponse.Contents.LoadFromFile('C:\Exempleweb\xpage1.html') ; Handled:=true end;
Voilà je suis pas experts de serveur gérer par un programme pascal ou autre mais je pense que cela devrait résoudre tes problèmes d'accès aux fichiers

22/11/2016, 11h35
FOCUS77

1 pièce(s) jointe(s)

Bonjour à tous

@ Beanz

Effectivement déposer tous les fichiers de l'application dans un seul dossier est une bonne chose.

cependant, et en faisant d'avantage d'essais, j'ai constaté finalement que la cause de non affichage

de l'image était le manque d'un anti-slash au début du code: :zen:

Code:

<img src="image\AVD.png" class="imageGauche" alt="mon image" /img>

correction:

Code:

<img src="\image\AVD.png" class="imageGauche" alt="mon image" /img>

et que l'image ouverte est bien celle qui est placée dans le dossier "htdocs" comme indiquée
par le fichier de configuration "httpd.conf"

Et je refais une nouvelle configuration de "httpd.conf" pour indiquer le nouvel emplacement
de mes dossiers (mis tous dans un seul dossier 'Webprojets') et l'application a fonctionné
sans aucun problème.

La chose nouvelle est le téléchargement du programme "xampp" contenant beaucoup de serveurs destinés aux

développement web y compris "Apache" ! en outre il dispose de "xampp-control" panel destiné à la configuration et la

mise en marche de ces serveurs:
img:
Pièce jointe 225500

merci à tous 8-)