问题:为什么我的 svg 图片在 url 正确时找不到?

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

不过,该 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,但这不会影响任何事情)

解答

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>