Dummy image when the datalist column is empty

StackOverflow https://stackoverflow.com/questions/12226644

  •  29-06-2021
  •  | 
  •  

Question

Am using a datalist to show the product details. In this time i want to show the image, but it displayed when the image filed having the image path, otherwise it's empty. I want to show the dummy image when the field is empty..

Here is my code:

<asp:DataList ID="DataList1" CaptionAlign="Right" runat="server" Width="100%" Visible="true" >
<ItemTemplate>
    <table width="100%" border="0" cellspacing="5" cellpadding="0">
        <tr>
            <td width="2%">
                &nbsp;
            </td>
            <td>
                <div class="Curved_box">
                    <div class="curved_Top">
                        <div class="curved_TopLft">
                        </div>
                        <div class="curved_TopRft">
                        </div>
                    </div>
                    <div class="CurvedContent">
                        <a href="#">
                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td style="width: 14px; height: 65px;">
                                    </td>
                                    <td style="width: 113px; height: 65px;">
                                        <asp:Image ID="Image1" Style="border: solid 1px #eaeaea; background: " runat="server"
                                            Height="60px" Width="60px" ImageUrl='<%#Bind("fldpic") %>' />
                                    </td>
                                    <td width="80%" align="right" style="height: 65px">
                                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                            <tr>
                                                <td colspan="2" style="height: 20px" align="left">
                                                    <asp:Label ID="lbl_name" runat="server" Font-Bold="true" Text='<%#Bind("name") %>'></asp:Label>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="width: 247px; height: 20px;" align="left">
                                                    <asp:Label ID="lblProd_Keywd" runat="server" Text='<%# Bind("Desig") %>' Font-Bold="True"></asp:Label>
                                                    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                                                </td>
                                                <td align="left" style="height: 20px">
                                                    <asp:Label ID="lblProd_Code" runat="server" Text='<%# Bind("fldempid") %>'
                                                        Font-Bold="True"></asp:Label>
                                                </td>
                                            </tr>
                                            <tr>

                                            </tr>
                                        </table>

                                    </td>
                                </tr>
                            </table>
                        </a>
                    </div>
                    <div class="curved_Btm">
                        <div class="curved_BtmLft">
                        </div>
                        <div class="curved_BtmRft">
                        </div>
                    </div>
                </div>
            </td>
            <td width="2%">
                &nbsp;
            </td>
        </tr>
    </table>
</ItemTemplate>
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" HorizontalAlign="Left" ForeColor="White" />
</asp:DataList>
Was it helpful?

Solution

add onerror attribute on <asp:Image> tag like onerror="this.src = 'url of dummy image'"

change this mark up 

<asp:Image ID="Image1" Style="border: solid 1px #eaeaea; background: " 
    runat="server" Height="60px" Width="60px" ImageUrl='<%#Bind("fldpic") %>' />

to

<asp:Image ID="Image1" Style="border: solid 1px #eaeaea; background: " 
    runat="server" Height="60px" Width="60px" ImageUrl='<%#Bind("fldpic") %>' 
    onerror="this.src = 'url of dummy image'" />
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top