Images Inside Gridview And Detailsview

I have been stuck on this problem for over a week, and have ripped out about all of my hair, so here it goes.

I am working on a portfolio on a website that administrators are allowed to update, but the public may only view....easy enough? The grid has three parameters; CatID, Descrip, and Pic - as seen below.


<asp:SqlDataSource ID="SqlDataSource2" runat="server"


ConnectionString="<%$ ConnectionStrings:NORTHWNDConnectionString %>"




SelectCommand="SELECT [CatID], [Descrip], [Pic] FROM [Categories]"




UpdateCommand="UPDATE Categories SET Descrip = @Descrip, Pic = @Pic WHERE CatID = @CatID"

DeleteCommand="DELETE FROM Categories WHERE CatID = @CatID"




InsertCommand="INSERT INTO [Categories] ([CatID], [Descrip], [Pic]) VALUES (@CatID, @Descrip, @Pic)" >



<DeleteParameters>


<asp:Parameter Name="CatID" Type="String" />

<asp:parameter Name="Descrip" />

</DeleteParameters>



<UpdateParameters>


<asp:parameter Name="Descrip" />

<asp:parameter Name="Pic" />

<asp:parameter Name="CatID" Type="String" />

</UpdateParameters>



<insertparameters>


<asp:parameter Name="CatID" Type="String" />

<asp:parameter Name="Descrip" Type="String" />

<asp:parameter Name="Pic" Type="String"/>

</insertparameters>

</asp:SqlDataSource>

The first this I am not sure of, is whether Pic should be a String or not.

Basically I am using Detailsview for the administrator to update, and the gridview for the public view.


<asp:DetailsView ID="DetailsView1" runat="server" AllowPaging="True"



AutoGenerateRows="False" DataKeyNames="CatID" HeaderText = "Portfolio"

DataSourceID="SqlDataSource2" Height="50px"

Width="300px" Font-Size = "14px" HeaderStyle-Font-Size="Larger" HeaderStyle-BackColor ="#27437D" HeaderStyle-ForeColor = "White"

BackColor="White" BorderColor="#999999" BorderStyle="None" BorderWidth="1px"

CellPadding="3" GridLines="Vertical">

<footerstyle backcolor="#CCCCCC" forecolor="Black" />

<rowstyle backcolor="#EEEEEE" forecolor="Black" />

<pagerstyle backcolor="#999999" forecolor="Black" horizontalalign="Center" />

<Fields>


<asp:boundfield DataField="CatID" HeaderText="Building/Job Name" ReadOnly="True" SortExpression="CatID">

</asp:boundfield>

<asp:boundfield DataField="Descrip" HeaderText="Description" SortExpression="CompanyName">

</asp:boundfield>

<asp:TemplateField HeaderText="Picture">


<EditItemTemplate>


<asp:TextBox ID="TextBox1" runat="server" Text='<%#Eval("Pic")%>' ></asp:TextBox>

</EditItemTemplate>

<InsertItemTemplate>


<asp:TextBox ID="TextBox1" runat="server" Text='<%#Eval("Pic")%>' ></asp:TextBox>

</InsertItemTemplate>

<ItemTemplate>


<asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("Pic") %>' />

</ItemTemplate>

</asp:TemplateField>

<asp:commandfield ShowDeleteButton="True" ShowEditButton="True" ShowInsertButton="True">

</asp:commandfield>

</Fields>

<HeaderStyle BackColor="#27437D" Font-Size="Larger" ForeColor="White"></HeaderStyle>

<alternatingrowstyle backcolor="#DCDCDC" />

</asp:DetailsView>

And my Gridview...

<asp:GridView ID= "GridView1" runat="server" DataSourceID="SqlDataSource2" AllowSorting="True" BackColor="White" CellPadding="3" Caption = "Portfolio"


Font-Size ="14px" BorderColor="#999999"BorderStyle="None"BorderWidth="1px"GridLines="Vertical"AutoGenerateColumns="False">

<FooterStyle BackColor="#CCCCCC" ForeColor="Black" />

<RowStyle BackColor="#EEEEEE" Font-Size = "Small" ForeColor="Black" />

<columns>


<asp:boundfield DataField="CatID" HeaderText="Building/Job Name"></asp:boundfield>

<asp:boundfield DataField="Descrip" HeaderText="Description"></asp:boundfield>







<asp:TemplateField HeaderText="Picture">


<EditItemTemplate>


<asp:TextBox ID="TextBox1" runat="server" text='<%# Eval("Pic") %>'

></asp:TextBox>

</EditItemTemplate>

<ItemTemplate>


<asp:Image ID="Image1" runat="server" ImageUrl= '<%# Eval("Pic") %>' />



</ItemTemplate>

</asp:TemplateField>



</columns>

<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />

<SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />

<HeaderStyle BackColor="#27437D" Font-Bold="True" ForeColor="White" />

<AlternatingRowStyle BackColor="#DCDCDC" />

</asp:GridView>


Now as I was looking around on the web I saw many people converting the path of the image to binary and the casting it to the DB, and likewise retrieving it from the DB as binary and converting it to an image, the problem is, I don't know how to do this.

Any help to ease my troubles is apprechiated greatly.

Edit: Also I am not totally sure what the '<%Eval("Pic") %>' is doing, it was autofilled for me.
Edit again: Another thing, if I replace any of the ImageUrl to an image path on the computer it does fill the space in the gridview/detailsview. However, with both cases I get a Operand type clash: nvarchar is incompatible with image error.