tui-image-editor not showing properly

AkylbekSul commented 1 year ago

Summary tui-image-editor not showing properly in Vanilla.js. Why? What am I doing wrong? Screenshots

Version 3.15.3

Additional context code:

import "./styles.css";

var ImageEditor = require("tui-image-editor");
var FileSaver = require("file-saver"); //to download edited image to local. Use after npm install file-saver
// var blackTheme = require("darktheme");
var locale_ru_RU = {
  // override default English locale to your custom
  Crop: "Обзрезать",
  "Delete-all": "Удалить всё"
  // etc...
};
var instance = new ImageEditor(document.querySelector("#tui-image-editor"), {
  includeUI: {
    loadImage: {
      path: "img/sampleImage.jpg",
      name: "SampleImage"
    },
    locale: locale_ru_RU,
    // theme: blackTheme, // or whiteTheme
    initMenu: "filter",
    menuBarPosition: "bottom"
  },
  cssMaxWidth: 700,
  cssMaxHeight: 500,
  selectionStyle: {
    cornerSize: 20,
    rotatingPointOffset: 70
  }
});

sandbox where I got this result https://ryy3zx.csb.app

NadimD commented 1 year ago

I'm having the same issue and in the meantime I did a workaround, not sure if this is right though.

I use SASS and did like below. I also had to make sure that scoped is not included in the style definition, or else the CSS would not show up.

<style lang="sass">
@import "~tui-image-editor/dist/tui-image-editor.min" // import css file from node_modules folder
</style>

lja1018 commented 1 year ago

@AkylbekSul The css load is required. The following CDN are available.

<link
  rel="stylesheet"
  href="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.css"
/>

stale[bot] commented 1 year ago

This issue has been automatically marked as inactive because there hasn’t been much going on it lately. It is going to be closed after 7 days. Thanks!

nhn / tui.image-editor

tui-image-editor not showing properly #831