Probleme d'affichage d'image.jpg dans ma jsp

**marcus crassus** · 22/10/2015, 12h10

Bonjour tout le monde,

j'ai un petit problème d'affichage d'image.jpg dans mon navigateur. j'ai creuser quelques forums, et je me suis casser la tête, j'en ai des cheveux blancs. j'ai dans ma base de données des images (BLOB), et quelques champs que je recupère dans une classe que j'appelle Base (que je peux ouvrir et fermer) comme ceci:

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
public ArrayList<Article> listerArticle() {
        ArrayList<Article> res = new ArrayList<Article>();
        String sql = "select * from t_article";
        PreparedStatement ps = null;
        ResultSet rs = null;
        try {
            ps = connection.prepareStatement(sql);
            rs = ps.executeQuery();
            while (rs.next()) {
                Article l = new Article();
                l.setNom(rs.getString("nom"));
                l.setDescription(rs.getString("description"));
                l.setPrix(rs.getFloat("prix"));
                l.setPhoto(rs.getBinaryStream("photo"));
                res.add(l);
            }
 
        } catch (SQLException e) {
            System.out.println("Erreur listerArticles "
                    +e.getMessage());
            e.printStackTrace();
        }
        try {if (ps != null) ps.close();} catch (Exception e) {}
        try {if (rs != null) rs.close();} catch (Exception e) {}
 
        return res;
    }

et j'ai aussi un bean pour recuperer mes champs depuis la base de donnée, voici mon bean ci dessous:

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
public class Article {
 
 
    private Integer id_article;
 
    @NonVide(mess="Le champ photo doit être rempli")
    private InputStream  photo;
 
    @NonVide(mess="Le champ nom doit être rempli")
    private String nom;
 
    @NonVide(mess="Le champ description doit être rempli")
    private String description; // titre ; annee ;
 
    @NonVide(mess="Le champ prix doit être rempli")
    @EstEntier(expr="[[0-9] [.]]++",
    mess="Le champ prix ne doit contenir que des chiffres")
    private Float prix;
 
    public Integer getId_article() {
        return id_article;
    }

pour ma page jsp, je procede comme ceci, car j'aimerais affiché chaque photo avec son nom pour un premier temps, voici le code de la jsp:

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<%@page import="java.io.FileInputStream"%>
<%@page import="javax.imageio.ImageIO"%>
<%@page import="java.io.File"%>
<%@page import="java.awt.image.BufferedImage"%>
<%@page import="java.io.FileOutputStream"%>
<%@page import="java.io.PrintWriter"%>
<%@page import="java.io.OutputStream"%>
<%@page import="java.io.BufferedOutputStream"%>
<%@page import="java.io.BufferedInputStream"%>
<%@page import="java.io.InputStream"%>
<%@page import="bean.Article"%>
<%@page import="java.util.ArrayList"%>
<%@page import="base.Base"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Lister livres</title>
</head>
<body>
 
<jsp:include page="../commun_page_menu/menu.jsp" />
<jsp:include page="../commun_messages/messages.jsp" />
<h3>
<%
    out.println("Liste des livres");
     
%>
</h3>
 
<ul>
<%
    Base base = new Base();
    base.ouvrir();
    ArrayList <Article> lst = base.listerArticle();
    base.fermer();
     
    for (Article l : lst) {
        out.println("<li>"+l.getNom()+"</li>");
         
        response.setContentType("image/jpeg");
        BufferedInputStream bis = new BufferedInputStream(l.getPhoto());
        BufferedOutputStream bos = new BufferedOutputStream(response.getOutputStream());
         
         
        int c;
        while ((c = bis.read()) != -1) {
            bos.write(c);
        }
         
        bos.flush();
         
         
    }

le problème cependant est que le navigateur n'affiche qu'une seule image (la première de la BDD), et rien d'autre, même pas les noms.

PLEASE HELP ME!!!!!!!

**joel.drigo** · 22/10/2015, 14h29

Salut,

Là, ce que tu fais, c'est écrire dans le flux de la réponse http les flux provenant de tes images, et que tu qualifies la réponse avec le contentType image/jpeg. Et donc, ton navigateur affiche le contenu de la réponse, donc une image (et encore parce qu'il ignore le reste du flux).

Il faut reprendre à la base le fonctionnement d'un navigateur : le navigateur prend le contenu de la réponse http (des octets) et l'affiche conformément au type de contenu qu'on lui indique dans les headers de la réponse (le contentType). Lorsque le contenu est du image/jpeg, il affiche un jpeg, lorsque le contenu est text/html il fait un rendu du contenu en partant du principe que c'est du html.

Toi, tu veux afficher du html, avec des images, donc des balises img. Il faut donc que tu génères un html avec des balises img. Ensuite, pour que l'image s'affiche, il faut soit fournir une url d'image, soit intégrer l'image dans le flux html (ce qui alourdi les pages html, donc pas forcément la bonne idée ici). Cette url, ça peut être simplement une redirection sur une jsp spéciale qui écrit le flux d'une (seule) image dans la réponse (en gros ce que fait ta jsp actuellement).

Au lieu de stocker le InputStream dans ton image, ce qui est une très mauvaise idée (tu stockes en mémoire des ressources dont tu ne contrôleras pas forcément correctement la fermeture), fait ta requête en 2 fois : dans la première, au lieu de stocker le InputStream, stocke l'id, qui te sert à générer l'url vers la jsp spéciale (une truc du genre "image.jsp?id=..."), et dans la seconde, exécutée dans la jsp spéciale, utilise cet id pour récupérer le InputStream de l'image associée et l'écrire dans le flux (en indiquant bien sûr le bon contentType.
Autre solution, au lieu de stocker l'InputStream, écrit le dans un fichier local au serveur (un dossier dédier), et stocke l'url de ce fichier dans ton objet Article, ce qui te permettra de remplir l'attribut src. Cette solution consomme de l'espace disque, mais consommera moins de ressources, en particulier si plusieurs utilisateurs chargent la page en même temps, et si tu t'arranges pour ne créer le fichier locale que dans les cas où c'est nécessaire (la première fois quand il n'existe pas encore, puis seulement s'il a changé dans la base). Cette solution nécessite que tu purges régulièrement le dossier des images (sinon plein de fichiers non utile vont stagner), mais elle peut avoir un autre avantage : tu peux stocker les images dans un dossier servi par un serveur apache, ce qui soulagera ton tomcat de la fourniture des images.
La solution d'écrire dans le flux les images, dont je parlais ci-avant, consiste à écrire le flux binaires de l'image dans le texte html (en base 64), l'attribut src de img devenant quelque chose comme ça : src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...". Mais le binaire de l'image sera converti en texte et sera très volumineux, ce qui va rendre tes pages très volumineuses et donc ralentir leur chargement.

**marcus crassus** · 22/10/2015, 22h20

Merci joel drigo, j'ai fait exactement comme tu m'as dis. J'ai pris l'id depuis ma permiere page, je l'ai envoyé à la page spéciale,
mais le nouveau problème est que dans ma seconde page, je recupère mon image(blob) en question que j'arrive facilement à stoquer
dans mon disque, mais sauf je ne sais pas comment gérer l'extention (du coup ca ne m'affiche pas vraiment les pages).
voici ma première page jsp qui envoi l'id:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<%
        Base base = new Base();
        base.ouvrir();
        ArrayList <Article> lst = base.listerArticle();
        base.fermer();
        
        for (Article l : lst) {
                out.println("<li>"+l.getNom()+"</li>");
                int id = l.getId_article();
                
                request.setAttribute( "identifiant", id ); 
                %>
		<jsp:include page="../premierePartie/testImage.jsp" />
	<%} %>

et voici ma seconde page qui recupère l'ide, puis recupère l'inputstream à l'aide d'une methode que j'ai creé chargePhotoById(int id) qui me renvoi
l'imputstream de ma photo:

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
<ul>
<%
        int id = (int)request.getAttribute("identifiant");
        response.setContentType("image/jpeg");
        InputStream is = null;
        OutputStream os =  new FileOutputStream("/home/ulrich/OutputFile/output.jpg");
        
        Base base = new Base();
        base.ouvrir();
        is = base.chargeImgById(id);
        BufferedInputStream bis = new BufferedInputStream(is);
        BufferedOutputStream bos = new BufferedOutputStream(os);
        
        int c;
        while ((c = bis.read()) != -1) {
                bos.write(c);
        }
        
        bos.flush();
        base.fermer();
%>
 
<img src="/home/ulrich/OutputFile/output.jpg"  />
 
</ul>

voici ma methode chargePhotoById:

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
public InputStream chargeImgById(int id){
		Article l = new Article();
		InputStream is = null;
 
		PreparedStatement ps = null;
		ResultSet rs = null;
		String sql = "select photo from t_article where id_article=?";
		try {
			ps = connection.prepareStatement(sql);
			ps.setInt(1,id);
			rs = ps.executeQuery();
			while (rs.next()) {
				l.setPhoto(rs.getBinaryStream("photo"));
			}
			is=l.getPhoto();
 
		} catch (SQLException e) {
			System.out.println("Erreur listerArticles "
					+e.getMessage());
			e.printStackTrace();
		}
		try {if (ps != null) ps.close();} catch (Exception e) {}
		try {if (rs != null) rs.close();} catch (Exception e) {}
 
 
		return is;
	}

du coup je n'arrive pas à les afficher, je pense que c'est à cause de l'extention. Sinon ta methode marche très bien, merci beaucoup

**joel.drigo** · 23/10/2015, 10h04

au lieu de <jsp:include page="../premierePartie/testImage.jsp" /, tu fais <img src="../premierePartie/testImage.jsp?id=<%=id%>">.
Et la jsp testImage.jsp est comme ça, en gros (sans création de fichier ici) :

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
<%
 
int id = Integer.parseInt(request.getParameter("id")); // récupération du paramètre
 
response.setContentType("image/jpeg"); // type de contenu
 
Base base = new Base();
base.ouvrir();
        ;
try(BufferedInputStream bis = new BufferedInputStream(base.chargeImgById(id));  
     BufferedOutputStream bos = new BufferedOutputStream(response.getOutputStream())) {
 
 
        int c;
        while ((c = bis.read()) != -1) {
            bos.write(c);
        }
 
}%>

Si tu veux stocker les fichiers, tu peux faire ça dans la classe Base, qui retournera le chemin de l'image, avec une structure du type :

Code pseudocode :

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

1
2
3
4
5
6
7
8
9
10
11
public static String getCheminImage(Article article) {
 
      String chemin = evalChemin(article); // chemin relatif au contexte
 
      si le fichier chemin n'existe pas
            créer fichier ( article, chemin )
      fin si
 
      return chemin;
 
}

et dans ta jsp principale tu n'as juste qu'à faire (ou ClasseTruc est le nom de la classe qui à la méthode getCheminImage(), Base si tu veux) :

Code :

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

<img src=<%= ClasseTruc.getCheminImage(article.getid())%>>

Dans Base tu peux retourner directement rs.getBinaryStream("photo"), au lieu de passer par Article.

Attention par ailleurs à ce que Base demande une connexion à un pool, plutôt que de se connecter, pour chaque image, et en plus de conserver la connexion dans l'instance sans jamais la fermer, surtout que tu crées une nouvelle instance de Base pour chaque image. Ça peut faire beaucoup de connexion, ce qui est non seulement lourd (une connexion est relativement lente à obtenir et consomme des ressources, multiplié par le nombre de connexion, çà pénalise les performances du système), mais tu risques de dépasser les limites de la base assez vite. Tu peux aussi bien faire une méthode statique pour obtenir le inputStream de ton blob.

Mais, tu peux également appeler cette méthode (getCheminImage) lors du chargement des articles lors de ta requête principale, et de stocker le chemin dans Article (au lieu du stream) : ainsi, dans la jsp principale, il suffit de faire :

Code :

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