vue.js - vue-material 不适用于带有自定义 svg 图标的 md-src

Question

我使用生成一个项目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>

编译成功，但是浏览器出现错误

Uncaught (in promise) 文件 /assets/icons/svg/telegram.svg 不是有效的 SVG。

svg 绝对有效！怎么修？

score 2 · Accepted Answer

我最近遇到了这个；正如莱昂纳多所说，这是由于新添加的 MIME 类型检查。出于某种原因，我的 SVG 文件被提供了Content-Type: text/html.

为了修复它，我不得不将我的图标更改为 use require，这（如果我理解正确的话）会导致它通过 Webpack 中的另一个加载器来修复 MIME 类型。（有关更多信息，请参见此处。）使用 OP 的示例，我会更改：

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

至

<md-icon :md-src="require('/assets/icons/svg/telegram.svg')" />

score 1 · Accepted Answer

2 回答 2