unable to see uploaded image preview in Editor.js on Vue Js 3

working with Laravel 10 and Vue Js 3 with Editor.js in my blog app. I have following createBlog.vue file with embedded Editor.js

<template>
  <!-- Input field for title -->
          <div class="_input_field">
            <Input v-model="title" type="text" placeholder="Enter title" />
          </div>

          <div class="_overflow _table_div blog_editor">
            <!-- Editor.js container -->
            <div ref="editorContainer" class="editor-container"></div>
          </div>

          <!-- Save button to save the content -->
          <div class="_input_field">
            <Button @click="save">Save</Button>
          </div>
</template>

<script>
import EditorJS from '@editorjs/editorjs';
import Header from '@editorjs/header';
import List from '@editorjs/list';
import Image from '@editorjs/image';

export default {
  data() {
    return {
      editor: null,  // The EditorJS instance
      title: '',     // Data for the title input
    };
  },
  mounted() {
    
    const csrfToken = document.head.querySelector('meta[name="csrf-token"]').getAttribute('content');

    // Initialize the Editor.js instance
    this.editor = new EditorJS({
      holder: this.$refs.editorContainer, // Reference to the div for Editor.js
      tools: {
        header: Header,  // Adding the Header block tool
        list: List,      // Adding the List block tool
        image: {
          class: Image,
          config: {
            endpoints: {
              byFile: 'http://localhost:8000/createBlog', // URL to upload image by file
             byUrl: null, // Not using by URL for now
           },
            field: 'image',  // The field name for file upload
           types: 'image/png, image/jpg, image/jpeg', // Allow image file types
            additionalRequestHeaders: {
              'X-CSRF-TOKEN': document.head.querySelector('meta[name="csrf-token"]').content
             }, // Ensure CSRF token is added if necessary
            captionPlaceholder: 'Enter image caption',
            buttonContent: 'Select Image',
            onUploadError: (error) => {
      console.error('Image upload failed:', error);
     },
          }
        },
      },
      autofocus: true, // Automatically focus the editor
      onReady: () => {
        console.log('Editor.js is ready to work!');
      },
    });
  },
  methods: {
    save() {
      // Save the content from Editor.js
      this.editor.save().then((outputData) => {
        console.log('Content saved:', outputData);

        // Combine the title and editor content
        const postData = {
          title: this.title, // The title entered by the user
          content: outputData // The content from the editor
        };

        // Now you can send `postData` to your server
        console.log('Post Data:', postData);
      }).catch((error) => {
        console.error('Saving failed:', error);
      });
    }
  },
  beforeUnmount() {
    // Clean up the editor instance
    if (this.editor) {
      this.editor.destroy();
      this.editor = null;
    }
  }
};

</script>

and controller for createBlog is

//upload Editor Image function
    public function uploadEditorImage(Request $request) {
        $this->validate($request, [
            'image' => 'required|mimes:jpeg,jpg,png',
        ]);
        $picName = time().'.'.$request->image->extension();
        $request->image->move(public_path('uploads'), $picName);
        return response()->json([
            'success' => 1,
            'file' => [
                'url' => "http://localhost:8000/uploads/$picName"
            ]
        ])->header('Content-Type', 'application/json');
       // return $picName;
    }

web.php is

Route::post('createBlog',[AdminController::class,'uploadEditorImage']);

now I need when I uploaded an image via editor preview of the image on the editor. but currently editor uploaded image to public/uploads folder successfully but not preview image on the editor then how could I fix this problem here?