Compartir a través de

Sintaxis declarativa del control de servidor Web Image

  • Artículo

Actualización: noviembre 2007

Muestra una imagen compatible con el Web en la página de formularios Web Forms.

<asp:Image
    AccessKey="string"
    AlternateText="string"
    BackColor="color name|#dddddd"
    BorderColor="color name|#dddddd"
    BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|Groove|Ridge|
        Inset|Outset"
    BorderWidth="size"
    CssClass="string"
    DescriptionUrl="uri"
    Enabled="True|False"
    EnableTheming="True|False"
    EnableViewState="True|False"
    ForeColor="color name|#dddddd"
    GenerateEmptyAlternateText="True|False"
    Height="size"
    ID="string"
    ImageAlign="NotSet|Left|Right|Baseline|Top|Middle|Bottom|
        AbsBottom|AbsMiddle|TextTop"
    ImageUrl="uri"
    OnDataBinding="DataBinding event handler"
    OnDisposed="Disposed event handler"
    OnInit="Init event handler"
    OnLoad="Load event handler"
    OnPreRender="PreRender event handler"
    OnUnload="Unload event handler"
    runat="server"
    SkinID="string"
    Style="string"
    TabIndex="integer"
    ToolTip="string"
    Visible="True|False"
    Width="size"
/>

Comentarios

El control Image se utiliza para mostrar una imagen en la página de formularios Web Forms. Al establecer la propiedad ImageUrl se especifica la ruta de acceso a la imagen mostrada. Puede especificar el texto que aparecerá en lugar de la imagen cuando ésta no esté disponible; para ello, establezca la propiedad AlternateText. La propiedad ImageAlign especifica la alineación de la imagen en relación con los demás elementos de la página de formularios Web Forms.

Nota

Este control sólo muestra una imagen. Si desea que la imagen se comporte como un botón o necesita determinar las coordenadas de la imagen donde se ha hecho clic, utilice el control ImageButton.

Nota

Puesto que el elemento <asp:Image> no tiene contenido, puede cerrar la etiqueta con /> en lugar de utilizar una etiqueta de cierre independiente.

Para obtener más detalles sobre las propiedades y eventos del control de servidor Web Image, consulte la documentación de Image.

Ejemplo

En el siguiente ejemplo se muestra cómo crear un control Image en una página Web.

Nota

En el siguiente ejemplo de código se muestra el modelo de código de un solo archivo, y podría no funcionar correctamente si se copia directamente en un archivo de código subyacente. Este ejemplo de código debe copiarse en un archivo de texto vacío que tenga la extensión .aspx. Para obtener más información sobre el modelo de código de formularios Web Forms, vea Modelo de código de las páginas web ASP.NET.

<%@ Page Language="VB" %>
<!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>
    <title>Image Example</title>
<script language="VB" runat="server">

      Sub Button_Click(sender As Object, e As EventArgs)
         Select Case DropList1.SelectedIndex
            Case 0:
               Image1.ImageAlign = ImageAlign.NotSet

            Case 1:
               Image1.ImageAlign = ImageAlign.Left

            Case 2:
               Image1.ImageAlign = ImageAlign.Right

            Case 3:
               Image1.ImageAlign = ImageAlign.Baseline

            Case 4:
               Image1.ImageAlign = ImageAlign.Top

            Case 5:
               Image1.ImageAlign = ImageAlign.Middle

            Case 6:
               Image1.ImageAlign = ImageAlign.Bottom

            Case 7:
               Image1.ImageAlign = ImageAlign.AbsBottom

            Case 8:
               Image1.ImageAlign = ImageAlign.AbsMiddle

            Case 9:
               Image1.ImageAlign = ImageAlign.TextTop

            Case Else:
               Image1.ImageAlign = ImageAlign.NotSet

         End Select
      End Sub

   </script>

</head>

<body>

   <form id="form1" runat="server">

      <h3>Image Example</h3>

      <div style="font-size:large">

         Text Text Text Text Text Text Text Text Text Text Text Text 
         Text Text Text Text Text Text Text Text Text Text Text Text 
         Text Text Text Text Text Text Text Text Text Text Text Text

      </div> 

      <asp:Image id="Image1" runat="server"
           AlternateText="Image text"
           ImageAlign="left"
           ImageUrl="images/image1.jpg"/>

      <hr />

      Select Image Align: <br />

      <asp:DropDownList id="DropList1"
           runat="server">

         <asp:ListItem>NotSet</asp:ListItem>
         <asp:ListItem>Left</asp:ListItem>
         <asp:ListItem>Right</asp:ListItem>
         <asp:ListItem>BaseLine</asp:ListItem>
         <asp:ListItem>Top</asp:ListItem>
         <asp:ListItem>Middle</asp:ListItem>
         <asp:ListItem>Bottom</asp:ListItem>
         <asp:ListItem>AbsBottom</asp:ListItem>
         <asp:ListItem>AbsMiddle</asp:ListItem>
         <asp:ListItem>TextTop</asp:ListItem>     

      </asp:DropDownList>

      <br /><br />

      <asp:Button id="Button1"
           Text="Apply Image Alignment"
           OnClick="Button_Click" 
           runat="server"/>

   </form>

</body>
</html>


<%@ Page Language="C#" %>
<!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>
    <title>Image Example</title>
<script language="C#" runat="server">

      void Button_Click(Object sender, EventArgs e)
      {
         switch(DropList1.SelectedIndex)
         {
            case 0:
               Image1.ImageAlign = ImageAlign.NotSet;
               break;

            case 1:
               Image1.ImageAlign = ImageAlign.Left;
               break;

            case 2:
               Image1.ImageAlign = ImageAlign.Right;
               break;

            case 3:
               Image1.ImageAlign = ImageAlign.Baseline;
               break;

            case 4:
               Image1.ImageAlign = ImageAlign.Top;
               break;

            case 5:
               Image1.ImageAlign = ImageAlign.Middle;
               break;

            case 6:
               Image1.ImageAlign = ImageAlign.Bottom;
               break;

            case 7:
               Image1.ImageAlign = ImageAlign.AbsBottom;
               break;

            case 8:
               Image1.ImageAlign = ImageAlign.AbsMiddle;
               break;

            case 9:
               Image1.ImageAlign = ImageAlign.TextTop;
               break;

            default:
               Image1.ImageAlign = ImageAlign.NotSet;
               break;

         }

      }

   </script>

</head>

<body>

   <form id="form1" runat="server">

      <h3>Image Example</h3>

      <div style="font-size:large">

         Text Text Text Text Text Text Text Text Text Text Text Text 
         Text Text Text Text Text Text Text Text Text Text Text Text 
         Text Text Text Text Text Text Text Text Text Text Text Text

      </div> 

      <asp:Image id="Image1" runat="server"
           AlternateText="Image text"
           ImageAlign="left"
           ImageUrl="images/image1.jpg"/>

      <hr />

      Select Image Align: <br />

      <asp:DropDownList id="DropList1"
           runat="server">

         <asp:ListItem>NotSet</asp:ListItem>
         <asp:ListItem>Left</asp:ListItem>
         <asp:ListItem>Right</asp:ListItem>
         <asp:ListItem>BaseLine</asp:ListItem>
         <asp:ListItem>Top</asp:ListItem>
         <asp:ListItem>Middle</asp:ListItem>
         <asp:ListItem>Bottom</asp:ListItem>
         <asp:ListItem>AbsBottom</asp:ListItem>
         <asp:ListItem>AbsMiddle</asp:ListItem>
         <asp:ListItem>TextTop</asp:ListItem>     

      </asp:DropDownList>

      <br /><br />

      <asp:Button id="Button1"
           Text="Apply Image Alignment"
           OnClick="Button_Click" 
           runat="server"/>

   </form>

</body>
</html>


<%@ Page Language="JSCRIPT" %>
<!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>
    <title>Image Example</title>
<script language="JSCRIPT" runat="server">

      function Button_Click(sender : Object, e : EventArgs){
         switch(DropList1.SelectedIndex){
            case 0:
               Image1.ImageAlign = ImageAlign.NotSet
               break
            case 1:
               Image1.ImageAlign = ImageAlign.Left
               break
            case 2:
               Image1.ImageAlign = ImageAlign.Right
               break
            case 3:
               Image1.ImageAlign = ImageAlign.Baseline
               break
            case 4:
               Image1.ImageAlign = ImageAlign.Top
               break
            case 5:
               Image1.ImageAlign = ImageAlign.Middle
               break
            case 6:
               Image1.ImageAlign = ImageAlign.Bottom
               break
            case 7:
               Image1.ImageAlign = ImageAlign.AbsBottom
               break
            case 8:
               Image1.ImageAlign = ImageAlign.AbsMiddle
               break
            case 9:
               Image1.ImageAlign = ImageAlign.TextTop
               break
            default:
               Image1.ImageAlign = ImageAlign.NotSet
               break
         }
      }

   </script>

</head>

<body>

   <form id="form1" runat="server">

      <h3>Image Example</h3>

      <div style="font-size:large">

         Text Text Text Text Text Text Text Text Text Text Text Text 
         Text Text Text Text Text Text Text Text Text Text Text Text 
         Text Text Text Text Text Text Text Text Text Text Text Text

      </div> 

      <asp:Image id="Image1" runat="server"
           AlternateText="Image text"
           ImageAlign="left"
           ImageUrl="images/image1.jpg"/>

      <hr />

      Select Image Align: <br />

      <asp:DropDownList id="DropList1"
           runat="server">

         <asp:ListItem>NotSet</asp:ListItem>
         <asp:ListItem>Left</asp:ListItem>
         <asp:ListItem>Right</asp:ListItem>
         <asp:ListItem>BaseLine</asp:ListItem>
         <asp:ListItem>Top</asp:ListItem>
         <asp:ListItem>Middle</asp:ListItem>
         <asp:ListItem>Bottom</asp:ListItem>
         <asp:ListItem>AbsBottom</asp:ListItem>
         <asp:ListItem>AbsMiddle</asp:ListItem>
         <asp:ListItem>TextTop</asp:ListItem>     

      </asp:DropDownList>

      <br /><br />

      <asp:Button id="Button1"
           Text="Apply Image Alignment"
           OnClick="Button_Click" 
           runat="server"/>

   </form>

</body>
</html>

Vea también

Referencia

Image

Otros recursos

Sintaxis de los controles de servidor Web