tui-image-editor 显示不正确

Question

tui-image-editor not showing properly. Why? What am I doing wrong?

Version: 3.15.3

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
  }
});

result:

sandbox where I got this result https://ryy3zx.csb.app . Same on my rails application.

Answer 1

Solved problem putting

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

inside head tag in application.html file. You can put anywhere before element with tui-image-editor