Image

TsgcHTMLComponent_Image — Delphi、C++ Builder、.NET で、形状、レスポンシブなサイズ調整、遅延読み込み、任意のライトボックスとキャプションを備えた Bootstrap 画像をレンダリングします。

概要

TsgcHTMLComponent_Image

Bootstrap スタイルを備えた画像要素です。ソースと代替テキストを設定し、形状を選択し、レスポンシブと遅延読み込みを切り替えてから、HTML プロパティを読み取ります。

コンポーネントクラス

TsgcHTMLComponent_Image

レンダリング内容

Bootstrap 5 の画像マークアップ

ファミリー

コンテンツ & レイアウト

言語

Delphi, C++ Builder, .NET

クイックスタート

作成し、ソースを設定し、レンダリングする

Src と Alt を割り当て、Shape を選択し、Responsive、LazyLoad、Lightbox を切り替えてから、HTML を読み取ります — または、静的な一行の Build ヘルパーを使用します。

uses
  sgcHTML_Enums, sgcHTML_Component_Image;

var
  oImg: TsgcHTMLComponent_Image;
begin
  oImg := TsgcHTMLComponent_Image.Create(nil);
  try
    oImg.Src := '/img/team.jpg';
    oImg.Alt := 'Our team';
    oImg.Shape := isRounded;
    oImg.Responsive := True;
    oImg.Lightbox := True;
    oImg.Caption := 'The team at work';

    WebModule.Response := oImg.HTML;   // <img> markup
  finally
    oImg.Free;
  end;
end;

// Or in a single line with the static helper:
Result := TsgcHTMLComponent_Image.Build('/img/team.jpg', 'Our team',
  isRounded, True);

// includes: sgcHTML_Enums.hpp, sgcHTML_Component_Image.hpp

TsgcHTMLComponent_Image *oImg = new TsgcHTMLComponent_Image(NULL);
try
{
  oImg->Src = "/img/team.jpg";
  oImg->Alt = "Our team";
  oImg->Shape = isRounded;
  oImg->Responsive = true;
  oImg->Lightbox = true;
  oImg->Caption = "The team at work";

  String html = oImg->HTML;   // <img> markup
}
__finally
{
  delete oImg;
}

// Or in a single line with the static helper:
String html = TsgcHTMLComponent_Image::Build("/img/team.jpg", "Our team",
  isRounded, true);

using esegece.sgcWebSockets;

var img = new TsgcHTMLComponent_Image();
img.Src = "/img/team.jpg";
img.Alt = "Our team";
img.Shape = TsgcHTMLImageShape.isRounded;
img.Responsive = true;
img.Lightbox = true;
img.Caption = "The team at work";

string html = img.HTML;   // <img> markup

// Or in a single line with the static helper:
string oneLine = TsgcHTMLComponent_Image.Build("/img/team.jpg", "Our team",
    TsgcHTMLImageShape.isRounded, true);

リファレンス

主なプロパティとメソッド

最もよく使うメンバーです。

Source

Src は画像の URL を設定し、Alt はアクセシブルな代替テキストを設定します。

Shape

Shape（TsgcHTMLImageShape: isRounded、isCircle、isThumbnail）は、角と枠線のスタイルを設定します。

Sizing

Responsive は img-fluid を適用し、画像をコンテナに合わせて拡大縮小します。Width と Height は明示的な寸法を設定します。

Loading

LazyLoad は loading="lazy" を追加し、画面外の画像を必要になるまで遅延させます。

Extras

Lightbox は画像をフルサイズのソースへのリンクで囲みます。Caption はキャプション付きの figure で囲みます。ImageID は DOM の id を設定します。

One-line build

Build(aSrc, aAlt, aShape, aResponsive) は、画像の HTML を 1 回の静的呼び出しで返します。

リソース

さらに詳しく

	すべての sgcHTML コンポーネント60 以上のコンポーネントの全機能マトリックスを閲覧できます。	開く
	無料体験版のダウンロード30 日間の体験版には 60.HTML デモプロジェクトが付属します。	開く
	価格完全なソースコード付きの Single、Team、Site ライセンス。	開く