vue + quill - значки отображаются в виде текста (вызвано загрузчиком файлов) - PullRequest
Новая
       29

vue + quill - значки отображаются в виде текста (вызвано загрузчиком файлов)

3 голосов
/ 16 марта 2019

Обновлено для демонстрации реплицированной проблемы

SVG импортируются через загрузчик файлов, и я не могу использовать raw-loader или html-loader: https://codesandbox.io/s/llr8x89j47

enter image description here

В настоящее время он отображается как «img / redo.01da1a6f.svg» вместо 

<svg viewbox="0 0 18 18"> <polygon class="ql-fill ql-stroke" points="12 10 14 12 16 10 12 10"></polygon> <path class="ql-stroke" d="M9.91,13.91A4.6,4.6,0,0,1,9,14a5,5,0,1,1,5-5"></path> </svg>

Я не могу решить эту проблему с помощьюТекущий наиболее многообещающий ответ.

Ответы [ 3 ]

2 голосов
/ 19 марта 2019

Это происходит потому, что quill ожидает, что изображения будут необработанными svg-строками. Чтобы исправить это, добавьте raw-loader или html-loader и измените ваш vue.config.js

module.exports = {
  chainWebpack: config => {
    // Exclude quill assets from file-loader
    config.module
      .rule("svg")
        .exclude
          .add(/node_modules[\\/]quill/)
          .end()

    // Add rule to load quill svg images as raw strings
    config.module
      .rule('quill-svg')
        .include
          .add(/node_modules[\\/]quill/)
          .end()
        .test(/\.(svg)(\?.*)?$/)
        .use('raw-loader')
          .loader('raw-loader')
  }
};

Вы можете добавить дополнительные include правила, если у вас есть пользовательские SVG-файлы, которые вы хотите использовать с quill.

0 голосов
/ 25 марта 2019

Ответ был довольно прост, просто переопределите любые правила, используя !!loader!

т.е. 

import UndoIcon from "!!raw-loader!quill/assets/icons/undo.svg"
0 голосов
/ 19 марта 2019

Добавить "svg-inline-loader" : 

yarn add svg-inline-loader

Затем в вашем vue.config.js (создайте этот файл в корне проекта, если он не существует), скопируйте / вставьте это правило: 

module.exports = {
  lintOnSave: false,
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.(svg)(\?.*)?$/,
          use: [
            {
              loader: 'svg-inline-loader',
            }
          ]
        }
      ]
    }
  },
  chainWebpack: config => {
    config.module
      .rule('svg')
      .test(() => false)
      .use('file-loader')
  }
}

Это должно работать.

Оригинальный ответ здесь

...