javascript-vue羽毛笔-图标显示为文本(由文件加载器引起)

前端之家收集整理的这篇文章主要介绍了javascript-vue羽毛笔-图标显示为文本(由文件加载器引起) 前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

更新以展示重复的问题

SVG正在通过文件加载器导入,但我无法使用原始加载器或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,1,9,14a5,5,5-5"></path> </svg>

我无法用当前最有希望的答案解决此问题.

最佳答案
发生这种情况是因为羽毛笔期望图像是原始的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')
  }
};

如果您有要与羽毛笔一起使用的自定义svg文件,则可以添加其他包含规则.

猜你在找的JavaScript相关文章