javascript - 如何在 Vuejs 中将 SVG 代码显示为图像？

Question

我有一个 API 会返回一个 SVG 图像作为 ASCII 文本代码。所以我有一个价值。我正在尝试将其显示为我的页面的一部分。它只是给了我一个空白图像。

这是我尝试的 JSFiddle：https ://jsfiddle.net/c0p4ku78/

代码的本质实际上是这样的：

<template>
<div id="app">
  <svg>{{circle}}</svg>
</div>
</template>
<script>
export default {
  name: "ImageShower",
  data: () {
    return {
      circle: `<?xml version="1.0" encoding="iso-8859-1"?> ... `
    }
  },
}
</script>

在实际代码中，circle 来自一个 Web 服务，并没有硬编码到视图组件中。但它看起来或多或少就像这里缩写的那样。

如何将此 SVG 显示为图像？

标签： javascriptvue.jssvg

Answer 1

您可以使用v-html指令渲染它：

<template>
<div id="app">
  <div v-html="circle"></div>
</div>
</template>
<script>
export default {
  name: "ImageShower",
  data: () {
    return {
      circle: `<?xml version="1.0" encoding="iso-8859-1"?> ... `
    }
  },
}
</script>