为什么在 url 正确时找不到我的 svg 图片？

Question

我正在使用https://identicon-api.herokuapp.com/ 在我的页面中嵌入身份图标。您可以选择 SVG 或 PNG。 PNG 工作得很好，但出于性能原因，我想使用 SVG。但是当我使用 SVG 时，找不到图像，并显示了 alt-text。

尽管如此，URL 是有效的，当我在新选项卡中打开图像时，它会正确呈现。

<img
  v-if="iconsenabled"
  style="max-width:1.75em"
  :src="'https://identicon-api.herokuapp.com/'+e.author+'/2000?format=svg'"
  :alt="e.author+`'s identcon.`"
  :title="e.author+`'s identicon. Toggle 'show icons' to see the name instead`"
/>

（顺便说一句，是的，我正在使用 Vue，但这不会影响任何事情）

Answer 1

SVG 具有由服务器设置的不正确的 MIME 类型。 <img> 要求 MIME 类型为 image/svg+xml，但 https://identicon-api.herokuapp.com/ 当前将其设置为 text/html，这会导致加载错误：

作为参考，这里有一个示例 SVG，它具有正确的 MIME 类型，可以在 <img> 中正确呈现：

<img src="https://upload.wikimedia.org/wikipedia/commons/4/42/Sample-image.svg" width="200">

作为一种解决方法，您可以获取 SVG，将其转换为 base64 字符串，并将其用作数据 URL：

<img :src="'data:image/svg+xml;base64,' + __SVG_BASE64__">

例子：

new Vue({
  el: '#app',
  data: () => ({
    myImgUrl: ''
  }),
  mounted() {
    fetch('https://identicon-api.herokuapp.com/tony19/2000?format=svg')
      .then(resp => resp.text())
      .then(text => this.myImgUrl = 'data:image/svg+xml;base64,' + btoa(text))
  }
})

<script src="https://unpkg.com/vue@2.6.12"></script>

<div id="app">
  <img :src="myImgUrl" width="200" height="200">
</div>