Image
TsgcHTMLComponent_Image — 渲染一张 Bootstrap 图片，带有形状、响应式尺寸、懒加载以及可选的灯箱和标题，适用于 Delphi、C++ Builder 和 .NET。
TsgcHTMLComponent_Image — 渲染一张 Bootstrap 图片，带有形状、响应式尺寸、懒加载以及可选的灯箱和标题，适用于 Delphi、C++ Builder 和 .NET。
一个带 Bootstrap 样式的图片元素。设置来源和替代文本，选择形状，切换响应式和懒加载，然后读取 HTML 属性。
赋值 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);您最常使用的成员。
Src 设置图片 URL，Alt 设置无障碍替代文本。
Shape（TsgcHTMLImageShape：isRounded、isCircle、isThumbnail）设置边角和边框样式。
Responsive 应用 img-fluid，使图片随其容器缩放；Width 和 Height 设置明确的尺寸。
LazyLoad 添加 loading="lazy"，使屏幕外的图片延迟到需要时再加载。
Lightbox 将图片包装在指向全尺寸来源的链接中；Caption 将其包装在带标题的 figure 中；ImageID 设置 DOM id。
Build(aSrc, aAlt, aShape, aResponsive) 通过单个静态调用返回图片 HTML。