vue + quill - 图标显示为文本（由文件加载器引起）

Question

已更新以展示重复的问题

SVG 正在通过文件加载器导入，我无法使用 raw-loader 或 html-loader：https://codesandbox.io/s/llr8x89j47

它目前显示为 "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>

我无法用当前最有希望的答案解决这个问题。

Answer 1

添加"svg-inline-loader":

yarn add svg-inline-loader

然后在你的vue.config.js（如果不存在则在项目根目录创建这个文件），copy/paste这条规则：

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

应该可以。

Answer 2

发生这种情况是因为 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')
  }
};

如果您有要与 quill 一起使用的自定义 svg 文件，则可以添加其他 include 规则。

Answer 3

答案非常简单，只需使用 !!loader!

覆盖任何规则

即

import UndoIcon from "!!raw-loader!quill/assets/icons/undo.svg"

vue + quill - 图标显示为文本（由文件加载器引起）

vue + quill - icons are shown as text (caused by file-loader)

javascript

quill

vue.js

vuejs2