我使用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绝对有效!怎么修?
我最近碰到了这个;正如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')" />