ASP : Afficher une Image dans un WebControls.Image

Question

Bonjour à tous,
Je fais appel à vous car je suis complètement bloquée dans la création d'un projet.
J'ai une site que je fais en asp.net et dans lequel les images sont stockées en base64string dans une base de données mysql. J'arrive à récupérer ma conversion d'image et à la re-convertir en type image mais le problème est que je ne peux pas la disposer dans ma page web étant donnée que celle-ci n'accepte que les images de type System.Web.UI.WebControls.Image.
J'arrive donc à afficher quelque chose dans mon tableau dont la colonne est de type "Image" (dans ma déclaration du tableau dans le "codeBehind" mais pas dans la page aspx) mais seul le type s'affiche "System.Drawing.Bitmap".

Voici le code que j'ai réalisé pour faire mon tableau avec pour le moment une seule données de test : 
    Function GetData() As DataTable
        Dim dt As New DataTable()

        ' définition du tableau
        dt.Columns.Add(New DataColumn("PictureID", GetType(String)))
        dt.Columns.Add(New DataColumn("Image", GetType(Image)))
        dt.Columns.Add(New DataColumn("Title", GetType(String)))
        dt.Columns.Add(New DataColumn("DateAdded", GetType(DateTime)))

        Dim dr As DataRow = dt.NewRow()

        dr("PictureID") = 1
        'je récupère la valeur récupérée par le datagridview, c'est à dire la valeur en Base64String que je converti en Image
        dr("Image") = GetImageFromBase64String(GridView4.Rows(0).Cells(1).Text)
        dr("Title") = "test"
        dr("DateAdded") = New DateTime(2005, 1, 15)
        dt.Rows.Add(dr)
        dr = dt.NewRow()
        Return dt

    End Function

Ici, là où devrait se trouver mon image, j'ai : "System.Drawing.Bitmap"
L'erreur vient surement dans la déclaration de mon gridview dans la page aspx puisque j'ai mis un boundFile... mais je ne vois pas comment faire avec un ImageField.

Quelqu'un pour m'aider ? (désolée si ce que je dis parait un peu "flou" mais j'ai essayé tellement de solutions que je suis un peu perdue...)
Bon après midi.
Gaby

yassinebennani · Answer

Ta question n'est pas un peu flou elle est très flou et (mal rédigée), pour avoir de l'aide essai de

1.Expliciter le besoin indépendament du problème
2.Ensuite colle le code qui sert à afficher ou lire ton image (si c'est un besoin d'affichage ou de lecture)
3.Ensuite expose le problème
4.Et à la fin si t'as une exception ou une erreur qui s'affiche essai de la copier coller en entier

comme ça t'auras plus de chances de trouver la solution ou au moins de l'aide.

Les fins justifient les moyens_________________________________________________
Yassine BENNANI - Ingénieur en génie logiciel & multimédia (Consultant SI)

cs_Megafan · Answer

Es-tu certain en web de pouvoir générer l'image dynamiquement et directement dans ton datatable ?
Je pense qu'il faut passer par une étape intermédiaire qui va générer ton image.


Megafan

Développeur de http://www.o10c.eu (Lien)


La nouvelle référence en matière de jeu de stratégie spatiale.

GabyAlTaz · Answer

@Jacksparoow :
Ok, je reprends dans l'ordre et je remets tout à plat :

1 : j'ai des images dans une base de données qui sont insérées en base64string (ce projet a été fait dans le cadre d'un stage et j'ai une application en c# qui me permet d'ajouter les images dans la BDD en base64string)
Le but est d'afficher ces images dans mon site web en asp qui s'alimente avec la BDD. J'ai donc essayé de re-convertir les données base64string en image (chose qui fonctionne très bien dans mon appli c#)

Mais, lors de l'affichage de celles-ci, rien ne s'affiche. Je pense que les problème est qu'on ne peut pas afficher quelque chose de type image dans un projet en Asp. Le type pour l'Asp est WebControls.Image et non System.Drawing.Image.

Ce que j'ai fait pour le moment : 
Pour faire ma connexion a ma base facilement, j'ai fait un datagridview qui récupère mes données dans la base de données et entre autres, mes données en base64string (ce qui m'affiche quelque chose du genre : "/9j/4AAQSkZJRgABAgEASABIAAD" etc...)

Mon objectif est de convertir cette chaine en une image qui s'affiche dans une page Asp

2 : le code. 
La page aspx qui permet de dire où le gridview s'alimente (ici dans la méthode getData() :
' AutoGenerateColumns= "False" 
  BorderWidth="1px" BackColor="White" CellPadding="3" BorderStyle="None" 
  BorderColor="#96BF0D" Font-Names="Arial">
    
    


    
    
        
            
        
        
        
              
        
        
    
    
    


Le code de la méthode getData() que j'avais déjà mis dans le précédent post :
Function GetData() As DataTable
Dim dt As New DataTable()

' définition du tableau
dt.Columns.Add(New DataColumn("PictureID", GetType(String)))
dt.Columns.Add(New DataColumn("Image", GetType(Image)))
dt.Columns.Add(New DataColumn("Title", GetType(String)))
dt.Columns.Add(New DataColumn("DateAdded", GetType(DateTime)))

Dim dr As DataRow = dt.NewRow()

dr("PictureID") = 1
'je récupère la valeur récupérée par le datagridview, c'est à dire la valeur en Base64String que je converti en Image
dr("Image") = GetImageFromBase64String(GridView4.Rows(0).Cells(1).Text)
dr("Title") = "test"
dr("DateAdded") = New DateTime(2005, 1, 15)
dt.Rows.Add(dr)
dr = dt.NewRow()
Return dt

End Function 

3 : le problème est exposé ci-dessus
4 : comme dit précédemment, je n'ai pas d'erreur qui s'affiche, à part que mon image ne s'affiche pas, à la place de celle-ci j'ai d'inscrit : "System.Drawing.Bitmap". Je pense que ça veut dire que ce type n'est pas pris en compte dans le tableau, mais je ne sais pas comment régler ce problème.

@Megafan
Je pense en effet qu'il y à une étape intermédiaire mais je ne sais pas comment faire. J'ai vu sur différents forums qu'il fallait un Handler mais je ne vois pas très bien le fonctionnement, ce qui ne m'aide pas.

Merci en tous cas d'avoir prit le temps de répondre.

Gaby

yassinebennani · Answer

Et bien maintenant que c'est bien rédigé et claire on peut terépondre avec plaisir en éspérant que la réponse va vous apporter de l'aide :

La réponse est la suivante, sur ton datagridview il faut utiliser une colonne de type templateField et non pas boundField à l'interieur il faut insérer un server control image (<asp:image).

après il faut passer à travers un HttpHandler c'est un fichier que tu peux ajouter à ton site web et qui prend l'id d'une ligne sur le queryString et qui return le contenu de l'image.

après tu attribut à la propriété ImageUrl de ton control image l'url de ton httpHandler (<asp:image imageurl="~/httphandler.ashx").

Voici un bon exemple qui illustre la procédure :
http://www.codedigest.com/articles/aspnet/6_gridview_with_image.aspx


 

Les fins justifient les moyens_________________________________________________
Yassine BENNANI - Ingénieur en génie logiciel & multimédia (Consultant SI)

cs_Megafan · Answer

J'allais effectivement te proposer de générer ton image par un aspx, mais effectivement par un ashx c'est surement plus dans la 'norme'.

Megafan

Développeur de http://www.o10c.eu (Lien)


La nouvelle référence en matière de jeu de stratégie spatiale.

GabyAlTaz · Answer

J'ai refais le gridview et le handler du lien que tu m'as donné en changeant seulement les requêtes mais j'ai seulement le nom des images qui s'affichent et pas les images elles-mêmes. Il y a une partie du code que je ne vois pas où placer, c'est celle pour le binding du griedview (pour le moment, pour lier mon gridview, j'ai utilisé l'outil graphique qui permet de faire la connexion à la base de données ainsi que la requête) : SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["connectionString"].ConnectionString); SqlCommand command = new SqlCommand("SELECT imagename,ImageID from [Image]", connection); SqlDataAdapter ada = new SqlDataAdapter(command); ada.Fill(dt); gvImages.DataSource = dt; gvImages.DataBind(); Voici le code de mon gridview : '/> Ici, si je mets : '<%# "ImageHandler.ashx?ImID="+ Eval("ImageID") %>' au lieu de '<%# "ImageHandler.ashx?ImID=1"%>', j'ai une erreur : "La conversion de la chaîne "httphandler.ashx?ImID=" en type 'Double' n'est pas valide." Alors que mon ID est comme dans le tuto, en INT. Pour le moment, faire le test avec l'ID_IMAGE = 1 me suffit mais je préfère en parler tout de suite. Voici le code du handler : <%@ WebHandler Language="VB" CodeBehind="httphandler.ashx.vb" Class="httphandler" %> Imports System.Web Imports System.Configuration Imports System.Data.SqlClient Imports System.Data Imports System.IO Imports System.Drawing Public Class ImageHandler Implements IHttpHandler Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest Dim imageid As String = context.Request.QueryString("ID_IMAGE") Dim connection As New SqlConnection(ConfigurationManager.ConnectionStrings("connectionString").ConnectionString) connection.Open() Dim command As New SqlCommand("select IMAGE from image where ID_IMAGE=" & imageid, connection) Dim dr As SqlDataReader = command.ExecuteReader() dr.Read() context.Response.BinaryWrite(DirectCast(dr(0), [Byte]())) connection.Close() context.Response.[End]() End Sub Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable Get Return False End Get End Property End Class Pour le moment, pour rester fidèle au "tuto" j'ai rajouter une colonne "image" à ma table de type blob dans laquelle j'ai insérer des images. Je pense que le mieux est de réussir cette étape avant de faire ma conversion de base64string vers l'image. Le problème est donc que j'ai du louper quelque chose étant donné que ma colonne où mes images devraient s'afficher est vide.

yassinebennani · Answer

le problème que j'zai constaté dans ton code est que l'id de l'image tu le passe dans l'url avec le nom ImID (<%# "ImageHandler.ashx?ImID="+ Eval("ImageID") %>)

alors il faut le chercher dans processrequest avec le même nom est non pas avec ID_IMAGE context.Request.QueryString("ID_IMAGE");

il faut le remplacer par context.Request.QueryString("ImID");


Les fins justifient les moyens_________________________________________________
Yassine BENNANI - Ingénieur en génie logiciel & multimédia (Consultant SI)

GabyAlTaz · Answer

Alors si j'ai bien compris je ne touche pas a cette ligne : 
'/>

et je change :
context.Request.QueryString("ID_IMAGE")
en :
context.Request.QueryString("ImID")

Parce que là j'ai fait ça et j'ai toujours la même erreur.

yassinebennani · Answer

Ok
En haut de ton code je vois cette ligne :

SqlCommand command =   new SqlCommand("SELECT imagename,ImageID from [Image]", connection); 

si j'ai bien compris la colonne (id) de ta table s'appelle ImageID;

alors pourquoi dans process request t'as fait

Dim command As New SqlCommand("select IMAGE from image where  ID_IMAGE     =" & imageid, connection)

il faut remplacer aussi par ImageID (non?????)

Essai de debuger sur ta méthode process request et la suivre pas à pas et tu trouvera surement le souci

Les fins justifient les moyens_________________________________________________
Yassine BENNANI - Ingénieur en génie logiciel & multimédia (Consultant SI)

GabyAlTaz · Answer

J'ai précisé plus haut que la partie :
SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["connectionString"].ConnectionString);
SqlCommand command = new SqlCommand("SELECT imagename,ImageID from [Image]", connection);
SqlDataAdapter ada = new SqlDataAdapter(command);
ada.Fill(dt);
gvImages.DataSource = dt;
gvImages.DataBind(); 

Je ne savais pas où la mettre, c'est donc celle qui est sur le site que tu m'as passé. Une fois que je saurais où la mettre, je pourrais adapter ma requête en : SELECT NOM_IMAGE, ID_IMAGE FROM image

Voici pour info, la structure de ma table image :
ID_IMAGE de type entier
NOM_IMAGE de type chaine
IMAGE de type blob

ASP : Afficher une Image dans un WebControls.Image

10 réponses

Votre réponse

Discussions similaires