10 Replies - 4109 Views - Last Post: 18 October 2011 - 03:13 AM

#1 John-Ellis  Icon User is offline

  • D.I.C Regular

Reputation: 8
  • View blog
  • Posts: 305
  • Joined: 23-March 10

My image will not show in browser

Posted 06 October 2011 - 12:15 PM

Hi All,

I am trying to build my first website using Visual Studio and ASP.net.

It is going to be a simple website at the moment with pictures, text and either links to other pages or button links to other pages.

My problem at the moment is, I have added an image using the picture box control but when I look at my site in the browser the picture does not load.

Can anyone help.

Thanks

John

Is This A Good Question/Topic? 0
  • +

Replies To: My image will not show in browser

#2 Nakor  Icon User is offline

  • Professional Lurker
  • member icon

Reputation: 446
  • View blog
  • Posts: 1,501
  • Joined: 28-April 09

Re: My image will not show in browser

Posted 06 October 2011 - 04:17 PM

can you post your code for it
Was This Post Helpful? 0
  • +
  • -

#3 Frinavale  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 203
  • View blog
  • Posts: 776
  • Joined: 03-June 10

Re: My image will not show in browser

Posted 07 October 2011 - 11:55 AM

A PictureBox control is a WinForms control.

It will not work in a web environment because it cannot be transformed into HTML (which is what browsers use to render the page content).

What you need to use instead is an ASP.NET Image Control to display the image.

Another thing to know, that is important to displaying images in a webpage, is that the browser needs to be able to retrieve the image from the web server. This is done using a URL to the image. If the image is in a directory that the browser cannot get to then the browser will not be able to download and display the image.

Therefore, I recommend that you move any images that you want to display in your website into a folder that is part of your website (like an "images" folder perhaps).

-Frinny
Was This Post Helpful? 0
  • +
  • -

#4 John-Ellis  Icon User is offline

  • D.I.C Regular

Reputation: 8
  • View blog
  • Posts: 305
  • Joined: 23-March 10

Re: My image will not show in browser

Posted 10 October 2011 - 10:22 AM

Hi All,

My appologies I am using the image control not the picture box control, I have no code to post as I used the image controls properties to insert my picture.

I got this method from the help topics in Visual Studio, is there another method available, one that works.

Cheers

John
Was This Post Helpful? 0
  • +
  • -

#5 Frinavale  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 203
  • View blog
  • Posts: 776
  • Joined: 03-June 10

Re: My image will not show in browser

Posted 11 October 2011 - 06:41 AM

View PostJohn-Ellis, on 10 October 2011 - 05:22 PM, said:

... I have no code to post as I used the image controls properties to insert my picture...


That makes no sense.
If you are looking at your page in the Visual Studio designer...hit the "Source" button at the bottom of the window. This will display the ASP.NET code for the page. Copy and paste the code for the <asp:Image /> control that you're having problems with so that we can see what you're doing.

-Frinny
Was This Post Helpful? 1
  • +
  • -

#6 DarenR  Icon User is offline

  • D.I.C Lover

Reputation: 497
  • View blog
  • Posts: 3,315
  • Joined: 12-January 10

Re: My image will not show in browser

Posted 11 October 2011 - 06:52 AM

if you are using vs in asp.net, on the bottom of the screen there are 3 options, design, split, source.

design shows just your pretty form
split shows your form and the code
source just shows your code.

click on the split or source and your code is right there.
Was This Post Helpful? 1
  • +
  • -

#7 John-Ellis  Icon User is offline

  • D.I.C Regular

Reputation: 8
  • View blog
  • Posts: 305
  • Joined: 23-March 10

Re: My image will not show in browser

Posted 11 October 2011 - 11:03 AM

ok now I see what you mean by source, I was looking at the View Code button. Ok see my source below.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .style1
        {
            font-weight: bold;
            text-decoration: underline;
            font-size: xx-large;
        }
    </style>
</head>
<body bgcolor="#ff6600">
    <form id="form1" runat="server">
    <div style="height: 982px">
    
        <asp:Image ID="Image1" runat="server" Height="153px" 
            ImageUrl="~/App_Data/avatar2.jpg" Width="140px" />
&nbsp;<span class="style1">************</span><br />
        <br />
        ************************************<br />
        <br />
        When you have found the part that you need please call John on *********** to 
        place your order or you can e-mail your order at
        <a href="mailto:***********">**********</a>.<br />
        <br />
        <asp:ImageButton ID="ImageButton1" runat="server" Height="92px" Width="134px" 
            ImageUrl="~/App_Data/series1.jpg" />
        &nbsp;Series 1 Land Rover&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:ImageButton ID="ImageButton14" runat="server" Height="92px" 
            Width="134px" ImageUrl="~/App_Data/defender.jpg" />
        &nbsp;Land Rover Defender<br />
        <br />
        <asp:ImageButton ID="ImageButton12" runat="server" Height="92px" 
            Width="134px" ImageUrl="~/App_Data/series2.jpg" />
        &nbsp;Series 2 Land Rover&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:ImageButton ID="ImageButton15" runat="server" Height="92px" 
            Width="134px" ImageUrl="~/App_Data/discovery1.jpg" />
        &nbsp;Land Rover Discovery 1<br />
        <br />
        <asp:ImageButton ID="ImageButton13" runat="server" Height="92px" 
            Width="134px" ImageUrl="~/App_Data/series3.jpg" />
        &nbsp;Series 3 Land Rover&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:ImageButton ID="ImageButton16" runat="server" Height="92px" 
            Width="134px" ImageUrl="~/App_Data/discovery2.jpg" />
        &nbsp;Land Rover Discovery 2<br />
        <br />
        <asp:ImageButton ID="ImageButton17" runat="server" Height="92px" 
            Width="134px" ImageUrl="~/App_Data/discovery3.jpg" />
        &nbsp;Land Rover Discovery 3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:ImageButton ID="ImageButton18" runat="server" Height="92px" 
            Width="134px" ImageUrl="~/App_Data/discovery4.jpg" />
        &nbsp;Land Rovery Discovery 4<br />
        <br />
        <asp:ImageButton ID="ImageButton19" runat="server" Height="92px" 
            Width="134px" ImageUrl="~/App_Data/rangeroverclassic.jpg" />
        &nbsp;Range Rover Classic&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:ImageButton ID="ImageButton20" runat="server" Height="92px" 
            Width="134px" ImageUrl="~/App_Data/p38.jpg" />
        &nbsp;Range Rover P38<br />
        <br />
        <asp:ImageButton ID="ImageButton21" runat="server" Height="92px" 
            Width="134px" ImageUrl="~/App_Data/L322.jpg" />
        &nbsp;Range Rover L322&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:ImageButton ID="ImageButton22" runat="server" Height="92px" 
            Width="134px" ImageUrl="~/App_Data/Range-Rover-Evoque-1.jpg" />
        &nbsp;Range Rover Evoque</div>
    </form>
</body>
</html>



At the moment this is just a test build, once this is completed and working properly I am going to re-build the site with properly named controls and information.

Hope the code above helps.

Thanks

John
Was This Post Helpful? 0
  • +
  • -

#8 Frinavale  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 203
  • View blog
  • Posts: 776
  • Joined: 03-June 10

Re: My image will not show in browser

Posted 11 October 2011 - 07:03 PM

Oh I see,
Do not store your images in the AppData folder.
Move them out of this folder somewhere else (like an "Images" folder in the root of your application).
The AppData folder is a special folder for things like embedded databases and such.
Do not use this folder for images because it won't work properly.

-Frinny
Was This Post Helpful? 1
  • +
  • -

#9 John-Ellis  Icon User is offline

  • D.I.C Regular

Reputation: 8
  • View blog
  • Posts: 305
  • Joined: 23-March 10

Re: My image will not show in browser

Posted 13 October 2011 - 11:57 AM

View PostFrinavale, on 11 October 2011 - 07:03 PM, said:

Oh I see,
Do not store your images in the AppData folder.
Move them out of this folder somewhere else (like an "Images" folder in the root of your application).
The AppData folder is a special folder for things like embedded databases and such.
Do not use this folder for images because it won't work properly.

-Frinny


Excellent, glad that is sorted it was starting to drive me mad, it is anoying that the help section in Visual Studio gave me the incorrect method.

Thanks very much for the help.

John
Was This Post Helpful? 0
  • +
  • -

#10 Frinavale  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 203
  • View blog
  • Posts: 776
  • Joined: 03-June 10

Re: My image will not show in browser

Posted 13 October 2011 - 02:24 PM

Yeah I remember learning that one the hard way too :)
I'm glad you got it sorted out!

-Frinny
Was This Post Helpful? 0
  • +
  • -

#11 hemantwithu  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 5
  • View blog
  • Posts: 31
  • Joined: 18-October 11

Re: My image will not show in browser

Posted 18 October 2011 - 03:13 AM

Hi There might be some Image Url Path problem.

Could you please post your code ?
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1