uploading Image

[Mon]

Hi,
I am using Rich Text editor for my project. I added image from 'Insert Image' and saving data in database.

When I try to show data in detail page, the image show as I added .But the problem is when I changed to other browser or open from another tab, the image showed like this.

How can I fix that problem?

[Gunasekar Kuppusamy]

Hi Mon,

Currently we are validating your reported query. We will update the further details within two business days(20th October).

Regards,

Gunasekar

[Gunasekar Kuppusamy]

Hi Mon,

Good day to you.

We have validated your reported issue from our end.

By default, images are stored with blob type in the RichTextditor, when you show the content to another page, the blob images will not be shown.

We have analyzed your query, by default image is saved as blob format in RichTextEditor. When you show the content to another page, the blob images will not be shown. To resolve this, You can save image in base64 format by configuring saveFormat as “Base64“on “insertimagesettings“ as follows,  

 

Code example:   

 

 

export class Default extends SampleBase {  

 constructor() {  

    this.imageSettings = {  

      saveFormat: "Base64"  

    }  

 }  

 render() {  

    return (  

    <RichTextEditorComponent insertImageSettings={this.imageSettings}>  

        <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]}/>  

    </RichTextEditorComponent>  

    )  

 }  

} 

  

 

We have prepared a sample for your reference, get it from the below link  

https://stackblitz.com/edit/react-joumd1-nxt7db?file=index.js |

Or you can store the images on the server by configuring saveUrl and path property. When you use this, the image will be loaded from the server path and visible on all pages.

Refer to the below sample,

Code Snippets:

export class Default extends React.PureComponent {

    constructor() {

        super(...arguments);

        this.insertImageSettings = {

        //Location of the image path

        path: 'http://localhost:62869/Images/',

        saveUrl: 'http://localhost:62869/api/richtexteditor/SaveFile'

        };

    }

}

<RichTextEditorComponent ref={richtexteditor => { this.rteObj = richtexteditor; }}

insertImageSettings={this.insertImageSettings}>

<Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]} />

</RichTextEditorComponent>

Sample: https://stackblitz.com/edit/react-rcdarc-eqbehv?file=index.js 

 

ASP.Net core service: https://www.syncfusion.com/downloads/support/directtrac/327926/ze/ASP.Net_core_image_save604872239 

 

Please check the solution and let us know if the solution helps,

Regards,

Gunasekar