Imageコントロールを利用した画像の表示
Imageコントロールを利用してページに画像を表示する手順を紹介します。
概要
Imageコントロールを利用すると、ASP.NETコントロールを利用してページに画像を表示できます。
プログラム例
事前準備
ページに表示する画像を準備します。今回は下図の画像を準備しました。
作成した画像はプロジェクトのルートディレクトリに追加します。追加は作成した画像ファイルをソリューションエクスプローラへドラッグ&ドロップで追加できます。または、ソリューションエクスプローラで右クリックし、[追加]メニューの[既存の項目]をクリックしファイル選択ダイアログで作成した画像を選択します。
UI
Visual Studio を起動しASP.NETアプリケーションを作成します。Webフォームにツールボックスから [Image] コントロールをドラッグ＆ドロップして配置します。
配置したImageコントロールをクリックして選択します。
Imageコントロールが選択された状態で右下のプロパティウィンドウの[ImageUrl]プロパティの欄の右側にある[...]ボタンをクリックします。
[イメージの選択]ダイアログが表示されます。あらかじめプロジェクトに追加した画像ファイルを選択します。
Imageコントロールに画像が表示されます。
編集後のaspxファイルのコードは下記になります。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SimpleImage.aspx.cs" Inherits="ImageDemo.SimpleImage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>画像を表示します。</p>
<asp:Image ID="Image1" runat="server" ImageUrl="~/sample-01.png" />
</div>
</form>
</body>
</html>
コード
コードを記述する必要はありません。
表示結果
プロジェクトを実行します。Webブラウザが起動されページが表示されます。Imageコントロールが表示され設定された画像が画面に表示されます。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
