Tui.image-editor: loadImageFromURL doesn't work including UI

[joecodino]

Version

tui.image-editor-3.3.0

Development Environment

Windows 10 Pro (Chrome, Firefox, Edge _- all up-to-date_)

Current Behavior

Unable to load image from URL using the UI:

var imageEditor = new tui.ImageEditor('.tui-image-editor', {
    cssMaxWidth: 700,
    cssMaxHeight: 500,
    includeUI: {
     theme: blackTheme, // or whiteTheme
     menuBarPosition: 'bottom'
    }
});
imageEditor.loadImageFromURL('https://vignette.wikia.nocookie.net/googology/images/b/bd/Test.jpg', 'SampleImage');

Expected Behavior

Same as using the _Load_ (from file) button: place the image on the canvas. Basicaly, using _loadImageFromURL_ in _examples\example01-includeUi.html_ doesn't work.

[lamkn]

the same issues, when I loaded url form S3

[T-vK]

loadImageFromURL is indeed not working. The issue can easily be reproduced: https://fiddle.sencha.com/#view/editor&fiddle/2org

[chadkouse]

Here's a trick that seems to workaround the issue. You need to call imageEditor.ui.activeMenuEvent(); and imageEditor.ui.resizeEditor and give it the new image size

imageEditor.loadImageFromURL("https://fiddle.sencha.com/classic/resources/images/sencha-logo.png", "SampleImage2").then((sizeValue)=>{
              imageEditor.ui.activeMenuEvent();
              imageEditor.ui.resizeEditor({imageSize: sizeValue});
              console.log("Image allegedly loaded.")
          }).catch(e=>{
              console.error("Something went wrong:")
              console.error(e)
          })

Maybe some event handler isn't getting called internally?

[T-vK]

Another workaround can be found here: https://stackoverflow.com/questions/54155431/toastui-image-editor-loadimagefromurl-doesnt-work

It also explains the S3 issue @lamkn btw.

[gamcoh]

@chadkouse the workaround for the Vue wrapper must be used like this:

imageEditor.editorInstance.ui.activeMenuEvent()
imageEditor.editorInstance.ui.resizeEditor({imageSize: sizeValue})

Hope that helps

[slightlynerd]

@gamcoh thanks, I've spent the last hour reading through both open and closed issues here. Your solution does was the only one that worked in the Vue app I'm working on.

[dubi92]

I have the same issue with it on React, I implement a mobile version of it, which mean that I didn't includeUI, how can I solve this problem by calling resizeEditor when the UI doesn't initialize. Because currently the image is hidden somehow.

[T-vK]

@lja1018 Has this issue been fixed?