Comment récupérer et afficher des images à partir d'une base de données dans une page JSP?
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 validehttp://
et donc pas une chemin du système de fichiers Disque localfile://
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 exemplehttp://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[]
ouInputStream
de la DB, le JDBC API offre leResultSet#getBytes()
1519420920 "etResultSet#getBinaryStream()
pour cela, et JPA API offres@Lob
for this. - dans le Servlet vous pouvez simplement écrire ce
byte[]
ouInputStream
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 viaServletContext#getMimeType()
basé sur l'extension du fichier image que vous pouvez étendre et/ou outrepasser via<mime-mapping>
dansweb.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:
- Comment dois-je me connecter à la base de données / source de données JDBC dans une application basée sur servlet?
- comment télécharger une image et la sauvegarder dans une base de données?
- la façon la plus simple de servir des données statiques à partir de l'extérieur du serveur d'application dans une application Web Java
je vous suggère de traiter cela comme deux problèmes. Il y a plusieurs questions et réponses liées aux deux.
-
Comment charger une goutte de MySQL
voir par exemple récupérer l'image stockée sous forme de blob
-
comment afficher l'image de façon dynamique
voir par exemple afficher la vignette dynamiquement
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.
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.