Display images inside summernote from db in laravel

Question

I'm working on a laravel project which should fetch content of home page (HTML Content) from database and display it inside Summernote rich text editor. Summernote displays my HTML Content well but doesnot display images. On checking code displayed in summernote, It had replaced / character with "". The same image gets displayed if pasted directly inside textarea and not fetched from dB. I tried some solutions found online and on stackoverflow but they didn't work for me.

 $(document).ready(function() {
  $('#summernote').summernote(
      {
        tabsize: 2,
        height: 400
      });
});

<form method="post">
                <div>
                    <textarea class="summernote" id="summernote" name="editordata"><div class="row-iconbox our-support-block">
                  {!!$cms_home->homepage_content!!}
                    </textarea>
                </div>
</form>

https://stackoverflow.com/questions/74304884/how-to-save-and-edit-images-by-summmernote-editor-in-laravel-8 Please read this question and help me — MD. RONY AHMED, Nov 03 '22 at 16:00

score 1 · Accepted Answer · edited Feb 12 '22 at 14:31

Digging deeper into / character being replaced by "" , MySQL had put \ before every " while storing or updating hence the image address could not be found while loading HTML content from database.

sample HTML

<img src="/storage/img/icon1.svg" height="100" width="100"/>

HTML content after storing in dB

<img src=\"/storage/img/icon1.svg\" width=\"100\" height=\"100\" />

Solution

1. Check UTF encoding

Open Mysql in terminal and replace DATABASE_NAME, TABLE_NAME with your db_name and table_name respectively.

SELECT CCSA.character_set_name FROM information_schema.`TABLES` T,information_schema.`COLLATION_CHARACTER_SET_APPLICABILITY` CCSA WHERE CCSA.collation_name = T.table_collation AND T.table_schema = "DATABASE_NAME" AND T.table_name = "TABLE_NAME";

2. If Encoding is not utf8, alter database and table to utf8 encoding

see how to do this

3. Add this code to your <head> in HTML

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Display images inside summernote from db in laravel

1 Answers1