Image

TsgcHTMLComponent_Image — affichez une image Bootstrap avec forme, dimensionnement responsive, chargement différé et une lightbox et une légende optionnelles, en Delphi, C++ Builder et .NET.

En bref

TsgcHTMLComponent_Image

Un élément d'image avec le style Bootstrap. Définissez la source et le texte alternatif, choisissez une forme, activez le responsive et le chargement différé, puis lisez la propriété HTML.

Classe du composant

TsgcHTMLComponent_Image

Produit

Du balisage d'image Bootstrap 5

Famille

Contenu & Mise en page

Langages

Delphi, C++ Builder, .NET

QuickStart

Créez-la, définissez la source, affichez-la

Affectez Src et Alt, choisissez une Shape, activez Responsive, LazyLoad et Lightbox, puis lisez HTML — ou utilisez l'assistant statique Build en une ligne.

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);

Référence

Propriétés & méthodes clés

Les membres que vous utilisez le plus souvent.

Source

Src définit l'URL de l'image et Alt le texte alternatif accessible.

Forme

Shape (TsgcHTMLImageShape : isRounded, isCircle, isThumbnail) stylise les coins et la bordure.

Dimensionnement

Responsive applique img-fluid pour que l'image s'adapte à son conteneur ; Width et Height définissent des dimensions explicites.

Chargement

LazyLoad ajoute loading="lazy" pour que les images hors écran soient différées jusqu'à ce qu'elles soient nécessaires.

Extras

Lightbox enveloppe l'image dans un lien vers la source en taille réelle ; Caption l'enveloppe dans une figure avec une légende ; ImageID définit l'identifiant DOM.

Construction en une ligne

Build(aSrc, aAlt, aShape, aResponsive) renvoie le HTML de l'image en un seul appel statique.

Ressources

Continuez l'exploration

	Tous les composants sgcHTMLParcourez la matrice complète des fonctionnalités de plus de 60 composants.	Ouvrir
	Télécharger la version d'essai gratuiteLa version d'essai de 30 jours fournit les projets de démonstration 60.HTML.	Ouvrir
	TarifsLicences Single, Team et Site avec code source complet.	Ouvrir