Image

TsgcHTMLComponent_Image — renderiza una imagen de Bootstrap con forma, tamaño adaptable, carga diferida y un lightbox y título opcionales, en Delphi, C++ Builder y .NET.

TsgcHTMLComponent_Image

Un elemento de imagen con estilo Bootstrap. Establece la fuente y el texto alternativo, elige una forma, activa el tamaño adaptable y la carga diferida, y luego lee la propiedad HTML.

Clase de componente

TsgcHTMLComponent_Image

Renderiza

Marcado de imagen de Bootstrap 5

Lenguajes

Delphi, C++ Builder, .NET

Créalo, establece la fuente, renderízalo

Asigna Src y Alt, elige una Shape, activa Responsive, LazyLoad y Lightbox, y luego lee HTML — o usa el ayudante estático de una línea 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);

Propiedades y métodos clave

Los miembros que más vas a usar.

Fuente

Src establece la URL de la imagen y Alt el texto alternativo accesible.

Forma

Shape (TsgcHTMLImageShape: isRounded, isCircle, isThumbnail) da estilo a las esquinas y al borde.

Tamaño

Responsive aplica img-fluid para que la imagen se escale a su contenedor; Width y Height establecen dimensiones explícitas.

Carga

LazyLoad añade loading="lazy" para que las imágenes fuera de pantalla se aplacen hasta que sean necesarias.

Extras

Lightbox envuelve la imagen en un enlace a la fuente a tamaño completo; Caption la envuelve en un figure con un título; ImageID establece el id del DOM.

Construcción de una línea

Build(aSrc, aAlt, aShape, aResponsive) devuelve el HTML de la imagen en una única llamada estática.

Sigue explorando

Todos los componentes sgcHTMLExplora la matriz completa de más de 60 componentes.
Descargar prueba gratuitaLa prueba de 30 días incluye los proyectos demo 60.HTML.
PreciosLicencias Single, Team y Site con código fuente completo.

¿Listo para empezar?

Descarga la prueba gratuita y empieza a crear interfaces web en Delphi, C++ Builder y .NET.