Image is not loading in editor after uploading.

[meet-s-7span]

After uploading image to s3 image is not loading, when we refresh the page it's load.

Steps to reproduce:

1. Click on image from toolbar
2. Select an image
3. See image is uploaded but not loaded in editor.

Expected behavior:

• When image upload then it's load and also get inputbox to add caption.

Screenshots:

Device: Macbook Pro ,
Browser: Chrome,
OS:MacOS Monterey

Version used in project
Vue: 2.7
@editorjs/editorjs: 2.30.7
@editorjs/image: 2.10.1

And also tried below verison
@editorjs/editorjs: 2.29.1
@editorjs/image: 2.9.0

[ewsellers]

What does your configuration look like? And the response on your endpoint?

[alguadmar]

I'm having this same issue. I'm working with Phoenix Liveview. This is my hook for mounting the editor:
`import EditorJS from '@editorjs/editorjs'
import Header from '@editorjs/header'
import List from '@editorjs/list'
import Paragraph from '@editorjs/paragraph'
import ImageTool from '@editorjs/image'

export default {
EditorJS: {
mounted() {
console.log("EditorJS Hook mounted", this.el)

  const container = this.el
  const initialData = JSON.parse(container.dataset.content || '{"blocks":[]}')
  
  console.log("Initial data processed:", initialData);
  
  this.editor = new EditorJS({
    holder: container.querySelector('.editor-container'),
    data: initialData,
    tools: {
      header: Header,
      list: List,
      paragraph: Paragraph,
      image: {
        class: ImageTool,
        config: {
          endpoints: {
            byFile: '/api/upload-image'
          },
          field: 'image',
          types: 'image/*',
          captionPlaceholder: 'Añade una descripción',
        }
      }
    },
    onChange: async () => {
      try {
        const content = await this.editor.save();
        console.log("Editor content saved:", content);
        const hiddenInput = container.querySelector('input[type="hidden"]');
        
        if (hiddenInput) {
          hiddenInput.value = JSON.stringify(content);
          hiddenInput.dispatchEvent(new Event('input', { bubbles: true }));
        }
      } catch (error) {
        console.error('EditorJS save error:', error);
      }
    }
  });
},
destroyed() {
  if (this.editor) {
    this.editor.destroy();
  }
}

}
}
`
And I have an endpoint with a controller for saving the images in a bucket and returning the correct format according to documentation. This is the format the response is supposed to be returned.
{
"success" : 1,
"file": {
"url" : "https://www.tesla.com/tesla_theme/assets/img/_vehicle_redesign/roadster_and_semi/roadster/hero.jpg",
// ... and any additional fields you want to store, such as width, height, color, extension, etc
}
}
My image is loaded correctly on the bucket, the response is correctly formatted by my endpoint, but I get the same loading block as in your screenshot. I will keep researching, maybe is that we are using s3, or Chrome on a mackbook, i have no clue.

[DirkLachowski]

the response is correctly formatted by my endpoint

Sure about that? The ImageTool sends an accept header of */* and my endpoint took that as an invitation to return xml.