Comment récupérer et afficher des images à partir d'une base de données dans une page JSP?

Comment puis-je récupérer et afficher des images à partir d'une base de données dans une page JSP?

22
demandé sur KNU 2010-02-26 11:49:24

4 réponses

voyons par étapes ce qui doit arriver:

  • JSP est fondamentalement un point de vue de la technologie, qui est censé générer une sortie HTML.
  • pour afficher une image en HTML, vous avez besoin de L'élément HTML <img> .
  • pour lui permettre de localiser une image, vous devez spécifier son attribut src .
  • l'attribut src doit pointer vers une URL valide http:// et donc pas une chemin du système de fichiers Disque local file:// car cela ne fonctionnerait jamais lorsque le serveur et le client fonctionnent sur des machines physiquement différentes.
  • L'URL de l'image doit avoir l'identificateur d'image dans le chemin de la requête (par exemple http://example.com/context/images/foo.png ) ou comme paramètre de requête (par exemple http://example.com/context/images?id=1 ).
  • dans le monde JSP/Servlet, vous pouvez laisser un Servlet écouter sur un certain modèle D'URL comme /images/* , de sorte que vous pouvez juste exécuter du code Java sur des URLs spécifiques.
  • Images sont des données binaires et doivent être obtenus soit comme un byte[] ou InputStream de la DB, le JDBC API offre le ResultSet#getBytes() 1519420920 "et ResultSet#getBinaryStream() pour cela, et JPA API offres @Lob for this.
  • dans le Servlet vous pouvez simplement écrire ce byte[] ou InputStream OutputStream de la réponse de l'habituel Java IO .
  • le côté client doit être informé que les données doivent être traitées comme une image, donc au moins l'en-tête de réponse Content-Type doit être réglé aussi. Vous pouvez obtenir le bon via ServletContext#getMimeType() basé sur l'extension du fichier image que vous pouvez étendre et/ou outrepasser via <mime-mapping> dans web.xml .

ça devrait être ça. Il écrit presque le code lui-même. Commençons par HTML (dans JSP ):

<img src="${pageContext.request.contextPath}/images/foo.png">
<img src="${pageContext.request.contextPath}/images/bar.png">
<img src="${pageContext.request.contextPath}/images/baz.png">

vous pouvez si nécessaire également régler dynamiquement src avec EL en itérant en utilisant JSTL :

<c:forEach items="${imagenames}" var="imagename">
    <img src="${pageContext.request.contextPath}/images/${imagename}">
</c:forEach>

puis Définir / créer un servlet qui écoute les requêtes GET sur le modèle D'URL de /images/* , le ci-dessous l'exemple utilise la vanille simple JDBC pour le travail:

@WebServlet("/images/*")
public class ImageServlet extends HttpServlet {

    // content=blob, name=varchar(255) UNIQUE.
    private static final String SQL_FIND = "SELECT content FROM Image WHERE name = ?";

    @Resource(name="jdbc/yourDB") // For Tomcat, define as <Resource> in context.xml and declare as <resource-ref> in web.xml.
    private DataSource dataSource;

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String imageName = request.getPathInfo().substring(1); // Returns "foo.png".

        try (Connection connection = dataSource.getConnection(); PreparedStatement statement = connection.prepareStatement(SQL_FIND)) {
            statement.setString(1, imageName);

            try (ResultSet resultSet = statement.executeQuery()) {
                if (resultSet.next()) {
                    byte[] content = resultSet.getBytes("content");
                    response.setContentType(getServletContext().getMimeType(imageName));
                    response.setContentLength(content.length);
                    response.getOutputStream().write(content);
                } else {
                    response.sendError(HttpServletResponse.SC_NOT_FOUND); // 404.
                }
            }
        } catch (SQLException e) {
            throw new ServletException("Something failed at SQL/DB level.", e);
        }
    }

}

C'est ça. Dans le cas où vous vous inquiétez au sujet des en-têtes de tête et de mise en cache et que vous répondez correctement à ces requêtes, utilisez ce modèle de résumé pour servlet de ressource statique .

voir aussi:

61
répondu BalusC 2017-05-23 11:55:10

je vous suggère de traiter cela comme deux problèmes. Il y a plusieurs questions et réponses liées aux deux.

  1. Comment charger une goutte de MySQL

    voir par exemple récupérer l'image stockée sous forme de blob

  2. comment afficher l'image de façon dynamique

    voir par exemple afficher la vignette dynamiquement

6
répondu ewernli 2017-05-23 12:18:22

vous pouvez également créer étiquette personnalisée pour l'affichage de l'image.

1) Créer une étiquette personnalisée java class et le fichier tld.

2) Ecrire la logique pour afficher l'image comme la conversion de byte[] en chaîne de Base64.

donc il est utilisé pour chaque image que vous affichiez une seule image ou plusieurs images dans une seule page jsp.

-1
répondu Musaddique 2015-08-26 13:58:48

j'ai utilisé la base de données SQL SERVER et donc le code de la réponse est conforme. Tout ce que vous avez à faire est d'inclure une étiquette <img> dans votre page jsp et d'appeler un servlet à partir de son attribut src comme ceci

<img width="200" height="180" src="DisplayImage?ID=1">

ici 1 est l'id unique de l'image dans la base de données et L'ID est une variable. Nous recevons la valeur de cette variable dans servlet. Dans le code de servlet nous prenons l'entrée de flux binaire de colonne correcte dans la table. C'est votre image est stockée dans la colonne. Dans mon code que j'ai utilisé troisième colonne parce que mes images sont stockées sous forme de données binaires dans la troisième colonne. Après avoir récupéré des données de flux d'entrée de la table nous lisons son contenu dans un flux de sortie afin qu'il puisse être écrit à l'écran. Voici le

import java.io.*;  
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.logging.Level;
import java.util.logging.Logger;
import javax.servlet.*;  
import javax.servlet.http.*;  
import model.ConnectionManager;
public class DisplayImage extends HttpServlet { 
    public void doGet(HttpServletRequest request,HttpServletResponse response)  
             throws IOException  
    { 
    Statement stmt=null;
    String sql=null;
    BufferedInputStream bin=null;
    BufferedOutputStream bout=null;
    InputStream in =null;

    response.setContentType("image/jpeg");  
    ServletOutputStream out;  
    out = response.getOutputStream();  
    Connection conn = ConnectionManager.getConnection();

    int ID = Integer.parseInt(request.getParameter("ID"));
        try {
            stmt = conn.createStatement();
            sql = "SELECT * FROM IMAGETABLE WHERE ID="+ID+"";
            ResultSet result = stmt.executeQuery(sql);
            if(result.next()){
                in=result.getBinaryStream(3);//Since my data was in third column of table.
            }
            bin = new BufferedInputStream(in);  
            bout = new BufferedOutputStream(out);  
            int ch=0;   
            while((ch=bin.read())!=-1)  
                {  
                bout.write(ch);  
            }  

        } catch (SQLException ex) {
            Logger.getLogger(DisplayImage.class.getName()).log(Level.SEVERE, null, ex);
        }finally{
        try{
            if(bin!=null)bin.close();  
            if(in!=null)in.close();  
            if(bout!=null)bout.close();  
            if(out!=null)out.close();
            if(conn!=null)conn.close();
        }catch(IOException | SQLException ex){
            System.out.println("Error : "+ex.getMessage());
        }
    }


    }  
}  

après l'exécution de votre fichier jsp ou html, vous verrez l'image à l'écran.

-1
répondu Gaurav Mahindra 2016-05-05 15:16:47