在 toast-ui vue 图像编辑器中未显示 Svg 图标

Question

我正在使用vue-cli和toast-ui-vue-image-editor。

// vue.config.js
const path = require('path')
let HardSourceWebpackPlugin = require('hard-source-webpack-plugin')

module.exports = {

  chainWebpack: config => {
    config.module
      .rule('svg')
      .use('file-loader')
      .options({
        name: '[name].[ext]',
        outputPath: ''
      })
  }

并在 Vue 组件中添加了这些行

import 'tui-image-editor/dist/svg/icon-a.svg'
import 'tui-image-editor/dist/svg/icon-b.svg'
import 'tui-image-editor/dist/svg/icon-c.svg'
import 'tui-image-editor/dist/svg/icon-d.svg'
import { ImageEditor } from '@toast-ui/vue-image-editor'

一切正常，但编辑器工具 Svg 图标未显示。查看编辑器的最底部部分，其中显示白色方块而不是图标（撤消，重做，裁剪等）

Answer 1

我给出了我的答案，希望这对将来的人有所帮助。

我也遇到过这个问题并用answer from this link解决了问题

这是我的脚本部分！

import 'tui-image-editor/dist/tui-image-editor.css'
import ImageEditor from '@toast-ui/vue-image-editor/src/ImageEditor.vue'
export default {
  name: 'ToastUI',
  components: {
    'image-editor': ImageEditor
  },
  data () {
    const icona = require('tui-image-editor/dist/svg/icon-a.svg')
    const iconb = require('tui-image-editor/dist/svg/icon-b.svg')
    const iconc = require('tui-image-editor/dist/svg/icon-c.svg')
    const icond = require('tui-image-editor/dist/svg/icon-d.svg')
    var whiteTheme = {
      'menu.normalIcon.path': icond,
      'menu.activeIcon.path': iconb,
      'menu.disabledIcon.path': icona,
      'menu.hoverIcon.path': iconc,
      'submenu.normalIcon.path': icond,
      'submenu.activeIcon.path': iconb,
      'common.bi.image': 'https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png',
      'common.bisize.width': '251px',
      'common.bisize.height': '21px',
      'common.backgroundImage': './img/bg.png',
      'common.backgroundColor': '#fff',
      'common.border': '1px solid #c1c1c1',
    }
    return {
      useDefaultUI: true,
      options: {
        includeUI: {
          loadImage: {
            path: '',
            name: ''
         },
          theme: whiteTheme,
          initMenu: '',
          menuBarPosition: 'bottom',
          menu: ['crop', 'flip', 'rotate', 'draw', 'shape', 'icon', 'text', 'mask'], //, 'filter',
        },
        cssMaxWidth: document.documentElement.clientWidth,
        cssMaxHeight: document.documentElement.clientHeight,
        selectionStyle: {
          cornerSize: 20,
          rotatingPointOffset: 70
        }
      }
   }
 }
}