feat: Image doesn't load except in base64

[AllanCLRS]

Environement Strapi : 4.7.1

Problem Impossible to display the image if not in base64

Config

globalThis.CKEditorConfig = {
  /* By default configs and theme
    objects will be spread with
    default configs and theme
    these two properties specified below
    allow you to redefine
    default objects completely: */

  //configsOverwrite:true,
  //themeOverwrite:true,

  /* Here you can redefine default configs
    or add completely new ones.
    Each config includes:
    "styles", "field" and "editorConfig" properties.
    Property "field" is required. */

  configs: {
    toolbar: {
      // styles:``,
      // field:{},
      // editorConfig:{}
    },
    custom: {
      /* Styles for this specific editor.
            This will be passed into the editor's parent container. */

      styles: `
                .ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-blurred{
                  min-height: 200px;
                  max-height: 200px;
                }
                .ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-focused{
                  min-height: 200px;
                  max-height: 1000px;
                }
            `,

      /* Custom field option */
      field: {
        key: "custom",
        value: "custom",
        metadatas: {
          intlLabel: {
            id: "ckeditor5.preset.custom.label",
            defaultMessage: "Custom version",
          },
        },
      },
      /* CKEditor configuration */
      editorConfig: {
        /* All available built-in plugins
                you can find in admin/src/components/Input/CKEditor/configs/base.js */
        plugins: [
          CKEditor5.alignment.Alignment,
          CKEditor5.autoformat.Autoformat,
          CKEditor5.basicStyles.Bold,
          CKEditor5.basicStyles.Italic,
          CKEditor5.basicStyles.Underline,
          CKEditor5.basicStyles.Strikethrough,
          CKEditor5.basicStyles.Subscript,
          CKEditor5.basicStyles.Superscript,
          CKEditor5.blockQuote.BlockQuote,
          CKEditor5.essentials.Essentials,
          CKEditor5.findAndReplace.FindAndReplace,
          CKEditor5.heading.Heading,
          CKEditor5.highlight.Highlight,
          CKEditor5.horizontalLine.HorizontalLine,
          CKEditor5.htmlEmbed.HtmlEmbed,
          CKEditor5.htmlSupport.GeneralHtmlSupport,
          CKEditor5.image.Image,
          CKEditor5.image.PictureEditing,
          CKEditor5.image.ImageStyle,
          CKEditor5.image.ImageCaption,
          CKEditor5.image.ImageInsert,
          CKEditor5.image.ImageToolbar,
          CKEditor5.image.ImageUpload,
          CKEditor5.image.ImageResize,
          CKEditor5.indent.Indent,
          CKEditor5.indent.IndentBlock,
          CKEditor5.link.Link,
          CKEditor5.link.LinkImage,
          CKEditor5.list.List,
          CKEditor5.list.ListProperties,
          CKEditor5.list.TodoList,
          CKEditor5.mediaEmbed.MediaEmbed,
          CKEditor5.paragraph.Paragraph,
          CKEditor5.pasteFromOffice.PasteFromOffice,
          CKEditor5.removeFormat.RemoveFormat,
          CKEditor5.selectAll.SelectAll,
          CKEditor5.specialCharacters.SpecialCharacters,
          CKEditor5.specialCharacters.SpecialCharactersEssentials,
          CKEditor5.sourceEditing.SourceEditing,
          CKEditor5.table.Table,
          CKEditor5.table.TableToolbar,
          CKEditor5.table.TableProperties,
          CKEditor5.table.TableCellProperties,
          CKEditor5.table.TableColumnResize,
          CKEditor5.table.TableCaption,
          CKEditor5.wordCount.WordCount,
        ],

        /* By default, for plugin's UI will use
                  the language defined in this file
                  or the preferred language from strapi's user config
                  and 'en' as a fallback.
                  language.ui -> preferred language -> 'en' */

        /* For content it will use language based on i18n (if! ignorei18n)
                  or language.content defined here
                  and it will use UI language as a fallback.
                  ignorei18n ? language.content : i18n; -> language.ui */

        language: {
          // ignorei18n: true,
          // ui:'he',
          // content:'he'
        },
        toolbar: [
          "undo",
          "redo",
          "|",
          {
            label: 'Insert',
            icon: 'paragraph',
            items :[
              "heading",
              "bold",
              "italic",
              "underline",
              "strikethrough",
              "superscript",
              "subscript",
              "removeFormat",
            ]
          },
          "|",
          "alignment",
          "bulletedList",
          "numberedList",
          "todoList",
          "horizontalLine",
          "outdent",
          "indent",
          "|",
          {
            label: 'Insert',
            icon: 'plus',
            items :[
              "link",
              "imageInsert",
              "strapiMediaLib",
              "mediaEmbed",
              "insertTable",
              "specialCharacters",
            ]
          },
          "|",
          "sourceEditing",
          "selectAll",
          "findAndReplace",
        ],
        mediaEmbed: {
          previewsInData: true,
        },
        heading: {
          options: [
            {
              model: "paragraph",
              title: "Paragraph",
              class: "ck-heading_paragraph",
            },
            {
              model: "heading1",
              view: "h1",
              title: "Heading 1",
              class: "ck-heading_heading1",
            },
            {
              model: "heading2",
              view: "h2",
              title: "Heading 2",
              class: "ck-heading_heading2",
            },
            {
              model: "heading3",
              view: "h3",
              title: "Heading 3",
              class: "ck-heading_heading3",
            },
            {
              model: "heading4",
              view: "h4",
              title: "Heading 4",
              class: "ck-heading_heading4",
            },

            {
              model: "heading5",
              view: "h5",
              title: "Heading 5",
              class: "ck-heading_heading5",
            },

            {
              model: "heading6",
              view: "h6",
              title: "Heading 6",
              class: "ck-heading_heading6",
            },
          ],
        },
        image: {
          toolbar: [
            "imageStyle:inline",
            "imageStyle:block",
            "imageStyle:side",
            "|",
            "toggleImageCaption",
            "imageTextAlternative",
          ],
        },
        table: {
          contentToolbar: [
            "tableColumn",
            "tableRow",
            "mergeTableCells",
            "|",
            "toggleTableCaption",
          ],
        },
        htmlSupport: {
          allow: [
            {
              name: /.*/,
              attributes: true,
              classes: true,
              styles: true
            }
          ],
          disallow: [
            {
              name: 'script'
            },
            {
              name: 'input'
            },
            {
              name: 'select'
            }
          ]
        }
      },
    },
  },

  /* Here you can customize the plugin's theme.
    This will be passed as "createGlobalStyle". */
  theme: {
    // common:``,
    // light:``,
    // dark:``,
    // additional:``
  },
};