vue-material不能使用自定义svg图标工作md-src

问题描述 投票:0回答:2

我使用vue-cli生成一个项目,然后运行vue add vue-material。然后我添加MdButton并检查浏览器

// work
<md-button class="md-icon-button">button</md-button>

然后我添加MdIcon并检查浏览器

// not work
<md-button class="md-icon-button">
    <md-icon md-src="/assets/icons/svg/telegram.svg"></md-icon>
</md-button>

编译成功,但浏览器中出现错误

未捕获(在承诺中)文件/assets/icons/svg/telegram.svg不是有效的SVG。

svg绝对有效!怎么修?

vue.js vue-cli vue-material
2个回答

1
投票

我最近碰到了这个;正如Leonardo所说,这是由于新添加的MIME类型检查。出于某种原因,我的SVG文件正在与Content-Type: text/html一起提供。

为了解决这个问题,我不得不改变我的图标以使用require(如果我理解正确的话)使它通过Webpack中的另一个加载器来修复MIME类型。 (有关更多信息,请参阅here。)使用OP的示例,我将更改:

<md-icon md-src="/assets/icons/svg/telegram.svg" />

<md-icon :md-src="require('/assets/icons/svg/telegram.svg')" />
© www.soinside.com 2019 - 2024. All rights reserved.