Image Class
A floating image in a sub-document.
Namespace: DevExpress.Blazor.RichEdit
Assembly: DevExpress.Blazor.RichEdit.v21.2.dll
NuGet Package: DevExpress.Blazor.RichEdit
Declaration
public class Image :
ImageBase<IImageProcessor>,
IImageProperties,
IImageBaseProperties,
ImageProperties,
ImageBasePropertiesRemarks
The Rich Text Editor allows you to insert pictures into a sub-document as inline or floating images.
A floating image is positioned regardless of the document text flow. You can place a floating image over text, behind text, or wrap text around the image. A floating image’s anchor 
specifies the paragraph associated with the image and indicates the image’s position in the text.
Use a sub-document’s Images property to access methods that allow you to insert and find floating images.
Insert Images
Call any method of the DocumentImageSource class to specify an image source. Pass the image source to an Images.CreateAsync method overload to insert the floating image into a sub-document.
The example below shows how to load a 1000 by 1000 twips image from a URL and insert it as floating image at the end of the main sub-document:
<DxRichEdit @ref="richEdit" />
@code {
DxRichEdit richEdit;
Document documentAPI;
@* ... *@
/* Surround the code that contains an asynchronous operation with a try-catch block to handle
the OperationCanceledException. This exception is thrown when an asynchronous operation is cancelled. */
try {
documentAPI = richEdit.DocumentAPI;
@* ... *@
DocumentImageSource imgSource = DocumentImageSource.LoadFromUrl("your-image-url", 1000, 1000);
Image Image = await documentAPI.Images.CreateAsync(imgSource);
@* ... *@
}
catch (OperationCanceledException e) {
Console.WriteLine($"{nameof(OperationCanceledException)} thrown with message: {e.Message}");
}
}
Access Images
Call the GetAsync(Int32) method to access a floating image by its index in a sub-document. To get all floating images in a sub-document, call the GetAllAsync() method.
The following example shows how to access the first floating image and all floating images in the main sub-document:
<DxRichEdit @ref="richEdit" />
@code {
DxRichEdit richEdit;
Document documentAPI;
@* ... *@
/* Surround the code that contains an asynchronous operation with a try-catch block to handle
the OperationCanceledException. This exception is thrown when an asynchronous operation is cancelled. */
try {
documentAPI = richEdit.DocumentAPI;
@* ... *@
Image firstImage = await documentAPI.Images.GetAsync(0);
IReadOnlyList<Image> Images = await documentAPI.Images.GetAllAsync();
@* ... *@
}
catch (OperationCanceledException e) {
Console.WriteLine($"{nameof(OperationCanceledException)} thrown with message: {e.Message}");
}
}
Change Image Properties
Pass image properties as an ImageProperties object to the ChangePropertiesAsync method to apply them to the image. You can specify the image properties or use the CopyFrom(Image) method to copy properties from another image.
The example below shows how to align a floating image to the center of the page.
<DxRichEdit @ref="richEdit" />
@code {
DxRichEdit richEdit;
Document documentAPI;
@* ... *@
/* Surround the code that contains an asynchronous operation with a try-catch block to handle
the OperationCanceledException. This exception is thrown when an asynchronous operation is cancelled. */
try {
documentAPI = richEdit.DocumentAPI;
@* ... *@
Image firstImage = await documentAPI.Images.GetAsync(0);
@* ... *@
await firstImage.ChangePropertiesAsync(properties => {
properties.HorizontalAlignment = FloatingObjectHorizontalAlignment.Center;
properties.HorizontalAnchorElement = FloatingObjectHorizontalAnchorElement.Page;
properties.VerticalAlignment = FloatingObjectVerticalAlignment.Center;
properties.VerticalAnchorElement = FloatingObjectVerticalAnchorElement.Page;
});
@* ... *@
}
catch (OperationCanceledException e) {
Console.WriteLine($"{nameof(OperationCanceledException)} thrown with message: {e.Message}");
}
}
The image size and position properties (for instance, height and width) are measured in twips. Use methods of the UnitConverter class to convert centimeters, inches, pixels, or points to twips.
The example below shows how to change a floating image’s actual size.
<DxRichEdit @ref="richEdit" />
@code {
DxRichEdit richEdit;
Document documentAPI;
@* ... *@
/* Surround the code that contains an asynchronous operation with a try-catch block to handle
the OperationCanceledException. This exception is thrown when an asynchronous operation is cancelled. */
try {
documentAPI = richEdit.DocumentAPI;
@* ... *@
Image firstImage = await documentAPI.Images.GetAsync(0);
@* ... *@
await firstImage.ChangePropertiesAsync(properties => {
if (firstImage.ActualSize.Height != UnitConverter.CentimetersToTwips(5)) {
properties.ActualSize.Height = UnitConverter.CentimetersToTwips(5);
properties.ActualSize.Width = UnitConverter.CentimetersToTwips(5);
}
});
@* ... *@
}
catch (OperationCanceledException e) {
Console.WriteLine($"{nameof(OperationCanceledException)} thrown with message: {e.Message}");
}
}
Delete Images
An image’s Interval property allows you to get the interval that contains the floating image. Pass the interval to the sub-document’s RemoveAsync(Interval) method to delete the floating image.
The following example deletes the first inline image of the main sub-document:
<DxRichEdit @ref="richEdit" />
@code {
DxRichEdit richEdit;
Document documentAPI;
@* ... *@
/* Surround the code that contains an asynchronous operation with a try-catch block to handle
the OperationCanceledException. This exception is thrown when an asynchronous operation is cancelled. */
try {
documentAPI = richEdit.DocumentAPI;
@* ... *@
Image firstImage = await documentAPI.Images.GetAsync(0);
@* ... *@
await documentAPI.RemoveAsync(firstImage.Interval);
@* ... *@
}
catch (OperationCanceledException e) {
Console.WriteLine($"{nameof(OperationCanceledException)} thrown with message: {e.Message}");
}
}