Image

TsgcHTMLComponent_Image — renderize uma imagem Bootstrap com forma, dimensionamento responsivo, lazy loading e um lightbox e legenda opcionais, em Delphi, C++ Builder e .NET.

Visão geral

TsgcHTMLComponent_Image

Um elemento de imagem com estilização Bootstrap. Defina a origem e o texto alternativo, escolha uma forma, alterne o dimensionamento responsivo e o lazy loading e então leia a propriedade HTML.

Classe do componente

TsgcHTMLComponent_Image

Renderiza

Markup de imagem do Bootstrap 5

Família

Conteúdo & Layout

Linguagens

Delphi, C++ Builder, .NET

QuickStart

Crie, defina a origem, renderize

Atribua Src e Alt, escolha um Shape, alterne Responsive, LazyLoad e Lightbox e então leia HTML — ou use o helper estático de uma linha 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);

Referência

Principais propriedades & métodos

Os membros que você usa com mais frequência.

Origem

Src define a URL da imagem e Alt o texto alternativo acessível.

Forma

Shape (TsgcHTMLImageShape: isRounded, isCircle, isThumbnail) estiliza os cantos e a borda.

Dimensionamento

Responsive aplica img-fluid para que a imagem se ajuste ao seu contêiner; Width e Height definem dimensões explícitas.

Carregamento

LazyLoad adiciona loading="lazy" para que imagens fora da tela sejam adiadas até serem necessárias.

Extras

Lightbox envolve a imagem em um link para a origem em tamanho real; Caption a envolve em uma figure com uma legenda; ImageID define o id no DOM.

Construção em uma linha

Build(aSrc, aAlt, aShape, aResponsive) retorna o HTML da imagem em uma única chamada estática.

Recursos

Continue explorando

	Todos os Componentes sgcHTMLExplore a matriz completa de recursos com mais de 60 componentes.	Abrir
	Baixar Versão de Avaliação GratuitaA avaliação de 30 dias inclui os projetos de demonstração 60.HTML.	Abrir
	PreçosLicenças Single, Team e Site com código-fonte completo.	Abrir