Tui.image-editor: Can't display editor in VueJS app

[humblecoder]

Version

3.2.0

Development Environment

MacOS 10.12.6
Chrome Version 68.0.3440.106 (Official Build) (64-bit)

Current Behavior

I realize this probably isn't a priority, but the editor doesn't display in VueJS app. Logging the results to the console shows no errors, and a successful result of the load, however nothing displays. The page literally has no relevant CSS that would hide the editor or otherwise manipulate it. I'm sure I'm missing something simple, but perhaps the JQuery requirements of ToastUI are causing problems? 🤔

<template lang="html">
  <div class="">
    <div id="image-editor" class="image-editor">
    </div>
  </div>
</template>

<script>
import ImageEditor from 'tui-image-editor'

export default {
  mounted(){
    this.EditorInstance = new ImageEditor(document.querySelector('#image-editor'), {
        cssMaxWidth: 700,
        cssMaxHeight: 500,
        selectionStyle: {
            cornerSize: 20,
            rotatingPointOffset: 70
        }
    });

    this.EditorInstance.loadImageFromURL(this.imageStoragePath,'image-editor')
      .then(resp=>{
        console.log('RESP',resp)
      })
      .catch(err=>{
        console.log('ERROR',err)
      })
  },
  data(){
    return{
      EditorInstance:null
    }
  },
  methods:{

  },
  computed:{
    imageStoragePath(){
      return '/storage/' + this.photo.path
    }
  },
  props:['photo']
}
</script>

<style lang="css">
</style>

Expected Behavior

It would be nice if I could actually load/view the editor.

[OculusMode]

I implemented tui-image-editor in my Vue app, i'll give reply in one to two days with how you can make it work.

[OculusMode]

I think what you did is pretty right, however, can you give some static height (and may be width) to div of image-editor (and upper div if necessary)? and yes. is image being loaded, if there is something wrong with path(which i think would not be case, just give some path from internet to check out) but as much i can see, i think the div is not getting height. Let me know if this doesn't work.

[humblecoder]

@OculusMode It's loading now. However it's amazingly jumbled. Clearly lacks CSS. Did you import from CDN or use local files and @import them?

Also, while I get a response from loadImageFromURL, no image actually displays. I've also tried loading images via the LOAD button. Still nothing.

[OculusMode]

I used it by installing from npm and using by import just like you. By clearly lacks CSS i guess you meant it must be showing only image? As much i studied their code you need to add their css and all stuff about their themes in project for their own UI. So i did create my own UI with whatever i needed and did whatever requirement i had by using their api on http://nhnent.github.io/tui.image-editor/latest/#

[humblecoder]

@OculusMode You mind sharing specifics? I simply need an image to load. I also only need the following features: crop, rotate, text, freedrawing.

[OculusMode]

I'm afraid i'm bound to organization and dont have code in this personal device. But in simple words, you can create buttons for whatever use you need. and put functionality as you need.

i.e.

<button @click="rotate">Rotate</Button>

rotate(){
this.imageEditor.rotate(90)
}

And if you need some help i'd love to but sorry about whole code.

[humblecoder]

@OculusMode I appreciate it. I'll try to figure the buttons out, but if you have any pointers on actually displaying the image, it would be appreciated. Currently I receive Uncaught (in promise) Invalid parameters when attempting to

includeUI : {
       menuBarPosition : 'top'
},

[OculusMode]

I'll need to create in my pc to check over that. im working on that. in the mean time. i suggest you that if the requirement is only to show image, you can remove includeUI part while creating instance. I'll install and create project and let you know if i find some solution.

[humblecoder]

@OculusMode So, it turns out (as you mentioned previously) to be a height/width issue. However, setting static height/width isn't sufficient. I must reset the values on image load. Otherwise it's 0x0. This is an odd thing. It would be nice if the tool was more readily configurable and "decorated" out of the box in this particular setting.

[OculusMode]

True that. But if one is good in css stuff, The functionality of tool is quite straight forward and easy to use. Anyways. You can ping if get stuck somewhere out here.