از کنترل Image در ASP.Net می توان برای نمایش تصویر و ِیا آیکون بر روی صفحه استفاده نمود . شما می توانید عکس یا آیکون کنترل را از قبل تعیین کرده و یا به صورت دینامیک آن را در هنگام اجرای صفحه تعیین و یا تغییر دهید . همچنین می توانید خاصیت ImageUrl کنترل را به یک فیلد بانک اطلاعاتی متصل کرده تا تصویر آن از طریق اطلاعات موجود در پایگاه داده تعیین شود .
این کنترل همانند تگ < img > در HTML عمل می کند و در هنگام اجرای صفحات ASP.Net به صورت یک تگ < img > به صفحه ارسال می شود .
شکل کلی تعریف و نمایش کنترل Image در صفحه های ASP.Net به صورت زیر است :

 

  < asp:Image ID=”Image1″ runat=”server” src = ” آدرس عکس مورد نظر ” / >

نحوه قرار دادن یک کنترل Image بر روی صفحه ASP.Net :

ابتدا یک صفحه ASP.Net در محیط Visual Studio ایجاد کرده و یا صفحه از قبل طراحی شده خود را باز کنید .
از منوی Toolbox و از قسمت کنترل های Standard یک کنترل Image را کشیده و روی صفحه قرار دهید .
همجنین می توانید به صورت مستقیم در فسمت کدنویسی Source صفحه کد مربوط به کنترل را تایپ نمایید .

تعیین عکس یا آیکون مورد نظر برای کنترل Image :

عکس یا آیکونی را که می خواهید توسط کنترل Image نمایش داده شود را توسط خاصیت ImageUrl این کنترل تعیین می کنید . برای این منظور بایستی مقدار خاصیت ImageUrl کنترل را برابر با آدرس عکس مورد نظر خود قرار دهید . در مثال زیر نحوه انجام این کار را نمایش داده ایم :
در حالت اول آدرس به صورت Relative است . این نوع آدرس دهی برای عکس هایی است که بر روی سرور اصلی سایت شما قرار دارد و برای آدرس دهی آن فقط باید مسیر و پوشه مورد نظر را تعیین کرد . اما در حالت دوم عکس بر روی سروری به غیر از سرور سایت شما قرار دارد . در این حالت باید آدرس کامل عکس شامل آدرس سرور و مسیر دسترسی را تعیین کنید .

 < asp:Image ID=”Image1″ runat=”server”   ImageUrl=” ~/Pic/imgexample.jpg ” />
< asp:Image ID=”Image1″ runat=”server”   ImageUrl=” http://www.rootfiles.com/Pic/imgexample.jpg ” />

 

تعیین ویژگی هایی برای کنترل Image :

شما می توانید چند ویژگی کاربردی را برای کنترل Image تعیین کنید . در زیر به ۲ مورد از این ویژگی ها اشاره می کنیم :

 

۱٫ خاصیت ToolTip : توسط این خاصیت می توانید یک متن خاص را تعیین کرده تا در هنگام قرار گیری موس بر روی عکس ، آن متن در قالب یک کادر ToolTip نمایش داده شود . این متن می تواند شامل توضیحاتی راجع به عکس باشد .
در مثال زیر نحوه استفاده از این خاصیت را نمایش داده ایم . با قرار گیری موس بر روی عکس خروجی مثال ، متن موجود در خاصیت ToolTip نمایش داده می شود .

< asp:Image ID=”Image1″ runat=”server” ImageUrl=” ~/Pic/imgexample.jpg ”   ToolTip=” سایت regiran” />

۱٫ خاصیت AlternateText : توسط این خاصیت می توانید یک متن خاص را تعیین کرده تا در صورتی که مرورگر موفق نشد به هر دلیلی عکس مورد نظر را نمایش دهد ، متن جایگزین را به جای عکس نشان دهد . ToolTip نمایش داده شود . این متن بایستی شامل توضیحاتی راجع به عکس باشد .
در مثال زیر نحوه استفاده از این خاصیت را نمایش داده ایم . به دلیل اینکه آدرس عکس اشتباه است ، مرورگر موفق نشده عکس را نمایش دهد . به همین علت متن جایگزین را نشان داده است .

< asp:Image ID=”Image1″ runat=”server” ImageUrl=” ~/Pic/1imgexample.jpg ”   AlternateText =” سایت آموزش کامپیوتر ” />