How to show the image from the database inside repeater

Question

User-1578974752 posted

In the below repeater, Below   ,<%#DataBinder.Eval(Container.DataItem, "Question") this code ,I have to retrieve an Image from the database so that along with the question image from database will also show in the repeater .(the Filename saved in the database from another page using File upload).Each question is having Image. QuestiondetID,Question,option,Path,Name all are saved in the same table.It is working fine if I use in gridview with download link.But here I have to show as image  with its questions Appreciate the help

Database

Name : fail-small.png  ->  Varchar(80)

Path : ~/Uploads/fail-small.png  ->nvarchar(200)

QuestionDetail table is having Name-  varchar(80) and Path- nvarchar(200)

<div>

<td align="left"><%#DataBinder.Eval(Container.DataItem, "Question") %></td>

</div>

Answer 1

User-369506445 posted

hi

first, define the path field in your query 

"SELECT [Question], [Option1], [Option2], [Option3], [Option4] FROM [QuestionDetail]"

to

"SELECT [Question], [Option1], [Option2], [Option3], [Option4],[path] FROM [QuestionDetail]"

then you can use below code inside your repeater

<img src="<%#DataBinder.Eval(Container.DataItem, "path") %>" /> 

please follow below link

https://www.c-sharpcorner.com/blogs/insert-and-retrieve-image-from-database-and-show-in-repeater1

Answer 2

User-1578974752 posted

Thanks Vahid bakkhi, Tried  as your code but image is not showing.

I have a download link with below code.It is opening the image but I want the image to be shown directly in the page instead of clicking the download link.

<asp:LinkButton ID="lnkDownload" runat="server" CommandArgument='<%# Eval("Path") %>' OnClick="DownloadFile" Text="Download"></asp:LinkButton>

Protected Sub DownloadFile(ByVal sender As Object, ByVal e As EventArgs)

 Dim filePath As String = CType(sender, LinkButton).CommandArgument

Response.AppendHeader("Content-Disposition", ("attachment; filename=" + Path.GetFileName(filePath)))

Response.WriteFile(filePath)

Response.End()

　 End Sub

Answer 3

User-369506445 posted

I didn't get your mean, the below line shows the Image, doesn't it?

<img src="<%#DataBinder.Eval(Container.DataItem, "path") %>" /> 

 

Answer 4

User-1578974752 posted

It is not showing. Just cross mark is showing instead of picture.

Answer 5

User-369506445 posted

because you have use Resolve path below like 

<img src="/<%# Page.ResolveClientUrl((string)Eval("path"))%>"  />

Answer 6

User-1578974752 posted

comma or valid expression continuation expected is showing when used as above instead of

<img src="<%#DataBinder.Eval(Container.DataItem, "path") %>" />

Answer 7

User-369506445 posted

do you still have the problem?

Answer 8

User-1578974752 posted

Yes,when I use <img src="/<%# Page.ResolveClientUrl((string)Eval("path"))%>" />

comma or valid expression continuation expected,error is showing.(String is a class type and can not use as an expression)

I can adjust with the Download link as it is working. But the problem with the down load link is that ,some question will not have Path and Name .In that case If I click on the download link ,will show the error message. How to do such that, if there is no image in path the link button is not shown.

<asp:LinkButton ID="lnkDownload" runat="server" CommandArgument='<%# Eval("Path") %>' OnClick="DownloadFile" Text="Show Image"></asp:LinkButton>

Answer 9

User-369506445 posted

you can check it in your code behind in ItemDataBound event

change your Repeater below like :

            <asp:Repeater ID="repeater" runat="server" DataSourceID="SqlDataSource1" OnItemDataBound="repeater_ItemDataBound">

in Code behind

Protected Sub repeater_ItemDataBound(sender As Object, e As RepeaterItemEventArgs)
        If e.Item.ItemType = ListItemType.Item Then
            Dim link As LinkButton = DirectCast(e.Item.FindControl("lnkDownload"), LinkButton)
            If (String.IsNullOrEmpty(link.CommandArgument)) Then
                link.Visible = False
            End If
        End If
    End Sub

the above code check if  the CommandArgument value be null then it  will disable the link button

Answer 10

User-1578974752 posted

Sorry .. Actually it is not a repeater ..it is List view as below .Hence OnItemDataBound is not working. The code I copied was from another page.

<img src="/<%# Page.ResolveClientUrl((string)Eval("path"))%>" />

Is there any code as above which will not show error in List view and can show the image below each question with out clicking the download link.

<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="QuestDetailID" Visible="False">

<ItemTemplate>

<div>

<td align="right">

<asp:Image ID="Image1" runat="server" ImageUrl="~/fail-small.png" /></td>

<td align="center">

<td align="left"><%#DataBinder.Eval(Container.DataItem, "Question") %></td>

&nbsp;&nbsp;&nbsp; <asp:LinkButton ID="lnkDownload" runat="server" CommandArgument='<%# Eval("Path") %>' OnClick="DownloadFile" Text="Show Image" ForeColor="Maroon"></asp:LinkButton>

</div>

<p>

<tr style="background-color:White;">

<tr><td align="left" colspan="3"> <asp:HiddenField ID="QuestionDetailID" runat="server" Value='<%#Eval("QuestDetailID") %>' /> </td></tr>

<td align="left"> <asp:Label ID="Option1" runat="server" Text=' <%# Eval("Option1") %>'></asp:Label><asp:RadioButton ID="rad1" GroupName="Group1" runat="server" /></td>

<td align="left"> <asp:Label ID="Option2" runat="server" Text=' <%# Eval("Option2") %>'></asp:Label> <asp:RadioButton ID="rad2" GroupName="Group1" runat="server" /></td>

<br>

</tr>

</ItemTemplate>

</asp:ListView>

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:QSCTestConnectionString %>" SelectCommand="SELECT TOP 15 [Question],[Name],[Path],[CorrectAnswer],[Option1], [Option2], [Option3], [Option4], [Option5], [QuestDetailID], [QuestionMasterID] FROM [QuestionDetail] WHERE ([QuestionMasterID] = @QuestionMasterID) ORDER BY NEWID()">

<SelectParameters>

<asp:ControlParameter ControlID="qusetid" Name="QuestionMasterID" PropertyName="Text" Type="Int64" />

</SelectParameters>

</asp:SqlDataSource>

Answer 11

User753101303 posted

Hi,

You could use the Image control ;https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.image?view=netframework-4.7.2 . It would be something such as ;

<asp:Image runat="server" id="image" ImageUrl='<%#Eval("Path")%>'/>

If I remember  ~ is processed for you. If the image doesn't show up and ~ is part of rendered image address you'll have to use ResolveClientUrl(Path) :
- https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.control.resolveclienturl?view=netframework-4.7.2

Answer 12

User-369506445 posted

don't worry, it <g class="gr_ gr_24 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar multiReplace" id="24" data-gr-id="24">work</g> with <g class="gr_ gr_47 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins doubleReplace replaceWithoutSep" id="47" data-gr-id="47">list</g> 

 <asp:ListView ID="ListView1" runat="server"   DataKeyNames="QuestDetailID" Visible="False" 
            OnItemDataBound="ListView_ItemDataBound">

and code behind

Protected Sub ListView_ItemDataBound(sender As Object, e As ListViewItemEventArgs)
        
            Dim link As LinkButton = DirectCast(e.Item.FindControl("lnkDownload"), LinkButton)
            If (String.IsNullOrEmpty(link.CommandArgument)) Then
                link.Visible = False
            End If
       
    End Sub

Answer 13

User-1171043462 posted

Refer

Display Images from Path stored in Database in ASP.Net ListView using C# and VB.Net