HTMLDataProvider won't render images in RadRichTextBox

1 Answer 40 Views
RichTextBox
Patrick
Top achievements
Rank 1
Iron
Iron
Iron
Patrick asked on 26 Jun 2024, 07:36 PM

Having an issue displaying images in a radRichTextBox. Below is my HTML. 

I have using an HTMLDataProvider to bind to a string that contains this HTML below.

The image does not display, all I get is this little box for the image.

The text all displays fine above it.

 


<head>
<link rel="stylesheet" href="../style.css" /> 
</head>
<p><strong>Section Header</strong></p>

<p><strong>Section Text</strong> This is my Description section</p>

<p><strong>Picture Title</strong></p>
<p><img src="../LocalFolderParent/Images/MyImage.png" alt="Figure 1 - Test 3" /></p>

Matt
Top achievements
Rank 1
Iron
commented on 27 Jun 2024, 01:59 PM

The issue might be the local image path. RadRichTextBox likely can't access local files directly due to security restrictions. Try embedding the image as base64 or using a web-accessible path for the src attribute.
Patrick
Top achievements
Rank 1
Iron
Iron
Iron
commented on 02 Jul 2024, 12:53 PM

This worked, thanks!

 

1 Answer, 1 is accepted

Sort by
0
Stenly
Telerik team
answered on 28 Jun 2024, 10:25 AM

Hello Patrick,

When importing HTML in RadRichTextBox, images are only shown if they are Base64-encoded or represented with a valid absolute URI. However, you have the ability to intercept the importing of a document and based on the information that you have, import all images properly. For this reason, the format provider exposes Import/Export settings and allows you to subscribe to the LoadImageFromUri. Here is a simple example demonstrating how you can use the event:

void importSettings_LoadImageFromUrl(object sender, LoadImageEventArgs e)
{
    using (FileStream fileStream = new FileStream(e.Url, FileMode.Open, FileAccess.Read, FileShare.Read))
    {
        e.ImageElement.Init(fileStream, "png");
        e.ImageElement.Tag = e.Url;
        e.Handled = true;
    }
}

I hope the provided information will be of help to you.

Regards,
Stenly
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Patrick
Top achievements
Rank 1
Iron
Iron
Iron
commented on 02 Jul 2024, 12:53 PM

Thank you!
Tags
RichTextBox
Asked by
Patrick
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Stenly
Telerik team
Share this question
or