Image
TsgcHTMLComponent_Image — Delphi, C++ Builder 및 .NET에서 모양, 반응형 크기 조정, 지연 로드 및 선택적 라이트박스와 캡션을 갖춘 Bootstrap 이미지를 렌더링합니다.
TsgcHTMLComponent_Image — Delphi, C++ Builder 및 .NET에서 모양, 반응형 크기 조정, 지연 로드 및 선택적 라이트박스와 캡션을 갖춘 Bootstrap 이미지를 렌더링합니다.
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);가장 자주 사용하게 되는 멤버.
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을 반환합니다.