Class ImageBlockSettings

Represents settings specific to an image block used in the SfBlockEditor.

Inheritance

object

BlockSettings

ImageBlockSettings

Inherited Members

object.Equals(object)

object.Equals(object, object)

object.GetHashCode()

object.GetType()

object.MemberwiseClone()

object.ReferenceEquals(object, object)

object.ToString()

Namespace: Syncfusion.Blazor.BlockEditor

Assembly: Syncfusion.Blazor.dll

Syntax

public class ImageBlockSettings : BlockSettings

Remarks

Use the ImageBlockSettings class to configure image-related options such as source URL, alternative text, and sizing for blocks where BlockModel.BlockType is Image. Assign an instance of this settings class to BlockModel.Properties for image blocks.

Common properties include:

• Src � The image source (for example, an absolute URL or data URI). If null or empty, the image is not rendered.
• AltText � Alternative text for accessibility and when the image cannot be displayed.
• Width and Height � CSS length values or keywords (for example, "600px", "auto", "100%").
• CssClass � Additional CSS class names applied to the image element for custom styling.

Performance considerations:

• Large images increase load time and memory usage. Prefer optimized assets and consider responsive image techniques.
• Constrain Width/Height to avoid layout shifts and excessive reflows.
• Loading behavior depends on browser caching and network; broken or slow sources may display alt text or placeholders.

Thread safety: This type is not thread-safe. Update instances from the UI thread.

Examples

Demonstrates creating an image block with explicit sizing, alt text, and a custom CSS class inside an SfBlockEditor.

<!-- Razor component markup -->
<SfBlockEditor @bind-Blocks="Blocks" />

@code {
    private List<BlockModel> Blocks = new()
    {
        new BlockModel
        {
            ID = "image-1",
            BlockType = BlockType.Image,
            Properties = new ImageBlockSettings
            {
                Src = "https://cdn.example.com/assets/banner.png",
                AltText = "Banner",
                Width = "600px",
                Height = "auto",
                CssClass = "e-block-image"
            },
            // Image blocks typically do not require text Content; omit or keep empty as needed.
            Content = new List<ContentModel>()
        }
    };
}

Constructors

ImageBlockSettings()

Declaration

public ImageBlockSettings()

Properties

AltText

Gets or sets the alternative text for the image used by assistive technologies and shown when the image cannot be loaded.

Declaration

public string AltText { get; set; }

Property Value

Type	Description
string	A string containing alternate text. The default value is "" (empty string).

Remarks

Provide meaningful alt text to improve accessibility. Leave empty only for purely decorative images.

Height

Gets or sets the CSS height applied to the image.

Declaration

public string Height { get; set; }

Property Value

Type	Description
string	A string representing the height (for example, "300px", "50%", or "auto"). The default value is "" (empty string), meaning no explicit height is applied.

Remarks

Maintain aspect ratio by specifying only one dimension and setting the other to "auto", or by leaving it empty.

Src

Gets or sets the source URL or data URI of the image.

Declaration

public string Src { get; set; }

Property Value

Type	Description
string	A string containing the image source (URL or data URI). The default value is "" (empty string).

Remarks

Provide an absolute or relative URL, or a data URI for inline images. If empty, the block renders without an image until a source is provided.

Width

Gets or sets the CSS width applied to the image.

Declaration

public string Width { get; set; }

Property Value

Type	Description
string	A string representing the width (for example, "600px", "50%", or "auto"). The default value is "" (empty string), meaning no explicit width is applied.

Remarks

When both Width and Height are unspecified, the image renders at its intrinsic size, constrained by min/max dimensions if provided.