image コンポーネントはブラウザ上でイメージを表示します。imageコンポーネントにイメージを指定する方法は二つあります。一つ目はsrcプロパティを使って、イメージが位置されているURIを指定します。この方法はHTMLがサポートしているものに似ています。静的なイメージを表示する場合、URLによって認識できるイメージを表示する場合、このアプローチは便利です。
<image src="/some/my.jpg"/>
URIを受け取っている他のプロパティを使用しているように、地域依存イメージを“*”で表示します。例えば、異なった地域に異なったイメージを指定するなら、以下のように使用できます。
<image src="/my*.png"
そのため、ユーザーの一人がデフォルト地域がde_DEに設定されたブラウザで訪れることを想定します。ZKは/my_de_DE.pngと呼ばれるイメージファイルを位置しようと試みます。見つからない場合、/my_de.pngを探し、最後は/my.pngを試します。
より詳しくは、国際化の章のブラウザとロケール依存URIを参照してください。
二つ目は、setContentメソッドを使用して、イメージコンテンツをimageコンポーネントに直接指定できます。指定したと同時に、ブラウザで表示されているイメージが自動的に更新されます。このアプローチはイメージが動的に生成されるときに使うと便利です。
例えば、以下のようにユーザーに指定された位置にマップを生成させます。
Location: <textbox onChange="updateMap(self.value)"/> Map: <image id="image"/> <zscript> void updateMap(String location) { if (location.length() > 0) image.setContent(new MapImage(location)); } </zscript>
上の例では、指定された位置のマップを生成する、いわゆるビジネスロジックを持つMapImage というクラスがあるとします。
イメージコンポーネントはorg.zkoss.image.Imageインターフェースの中のコンテンツのみを受け取ります。ツールによって生成させたイメージがこのフォーマットでない場合、org.zkoss.image.AImageクラスを使用して、バイナリデータ配列、又はファイル、又は入力列を包みImageインターフェースに入れましょう。
従来のウェブアプリケーションでは、動的に発生したイメージをキャッシュすることは複雑です。imageコンポーネントを使えば心配する必要はありません。一度イメージコンテンツが指定されると、それはimageコンポーネントに属し、imageコンポーネントを使わなくなった後、メモリは自動的に開放されます。
【ヒント】:イメージや、オーディオ以外のPDFといったコンテンツを表示する場合、iframeコンポーネントを使用できます。詳細は関係セクションを参照。