Affichage impossible d'une image dans une page HTML

**FOCUS77** · 16/11/2016, 21h13

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 :

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

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>
    <!-- Entrez votre texte... -->
  </body>
</html>

Code :

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

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 :

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

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 :

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

 RegisterHTTPModule('session', TWebModule);

merci d'avance.

**BeanzMaster** · 17/11/2016, 00h17

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 ?

**FOCUS77** · 17/11/2016, 09h38

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 :

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
<!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 :

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
#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 :

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
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:
Nom : photos1.png
Affichages : 413
Taille : 145,2 Ko

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

Nom : photo.png
Affichages : 353
Taille : 4,6 Ko

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

Nom : Error.png
Affichages : 433
Taille : 37,4 Ko

**BeanzMaster** · 17/11/2016, 14h54

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 :

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

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 :

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

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

**FOCUS77** · 22/11/2016, 11h35

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:

Code :

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

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

correction:

Code :

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

<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:
Nom : xampp.png
Affichages : 421
Taille : 95,0 Ko

Nom : xampp.png
Affichages : 421
Taille : 95,0 Ko

merci à tous

Affichage impossible d'une image dans une page HTML [Lazarus]

Lazarus Pascal

Vue hybride

Discussions similaires

Partager

Partager