Images not loading in editor

[sproott]

Describe the bug When entering the editor for an entry, image previews in Markdown and in individual fields are not loaded, showing an empty placeholder SVG instead. The images are shown only after interacting with the editor in some way, e.g. resizing or editing content.

To Reproduce

1. Clone https://github.com/sproott/astro-decap-images and install dependencies with pnpm
2. Run pnpm run dev and pnpm run cms to start the web app
3. Open the started app in the browser
4. Click on the post to edit it
5. Refresh the page
6. Image previews in the left editor pane are empty

Expected behavior

Image previews should be displayed.

Screenshots

Applicable Versions:

• Decap CMS version: 3.1.1
• Git provider: GitHub
• OS: Arch Linux
• Browser version: Firefox Developer Edition 123
• Node.JS version: 18

CMS configuration

https://github.com/sproott/astro-decap-images/blob/main/public/admin/config.yml

Additional context

I've managed to reproduce the issue on this repo (putting the config in the dev-test directory). Then after adding console.log statements to the getAsset function like so:

    let { asset, isLoading, error } = state.medias[resolvedPath] || {};
    if (isLoading) {
      console.log("empty")
      return emptyAsset;
    }

    if (asset) {
      console.log("in memory", {asset})
      // There is already an AssetProxy in memory for this path. Use it.
      return asset;
    }

It can be observed that the function prints empty for each image, then after a while prints in memory with the correct asset URLs, but the src attributes of the images in the editor stay the same, pointing to the empty SVG image. There seems to be an issue with how the asset state is passed to the Image widget and subsequently updated.

[martinjagodic]

@sproott thanks for sharing. I see you described the issue well and even dug into the codebase to find the issue. It would be amazing if you could open a PR for a fix.