vue + quill -图标显示为文本(由文件加载程序引起)。
vue + quill -图标显示为文本(由文件加载程序引起)。
提问于 2019-03-15 23:54:41
更新以展示复制的问题
SVGs是通过文件加载程序导入的，我无法使用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>我无法用目前最有希望的答案来解决这个问题。
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-03-25 07:56:21
答案很简单，只要使用!!loader!覆盖任何规则
即
import UndoIcon from "!!raw-loader!quill/assets/icons/undo.svg"Stack Overflow用户
发布于 2019-03-19 08:50:20
这是因为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规则。
Stack Overflow用户
发布于 2019-03-18 21:10:41
添加"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')
}
}应该管用的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55192072
复制相关文章
相似问题
腾讯云开发者
