html - 为什么在 url 正确的情况下找不到我的 svg 图像？

Question

我正在使用 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，但这不会影响任何东西)

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>