CODEWITHSUNDEEP
javascriptvue.jssvg
mmachenry
mmachenry

Reputation: 1962

How can I display SVG code as image in Vuejs?

I have an API that is returning, among other things, an SVG image as ASCII text code. So I have that in a value. I am trying to display it as part of my page. It's just giving me a blank image.

This is the JSFiddle of my attempt: https://jsfiddle.net/c0p4ku78/

The essences of the code is effectively this:

<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>

In the real code, circle comes from a web service and is not hard coded into the view component. But it looks more or less as is abbreviated here.

How can I display this SVG as an image?

Upvotes: 1

Views: 1377

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

You could render it using v-html directive :

<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>

Upvotes: 2

Related Questions