My API is returning an SVG image as ASCII text code, which I am trying to display on my page. However, instead of the image, I just see a blank space.
You can view my attempted solution in this JSFiddle: https://jsfiddle.net/c0p4ku78/
The key parts of the code are as follows:
<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 reality, the 'circle' data comes from a web service and is not hardcoded into the component. This is just an abbreviated representation.
Can anyone help me figure out how to properly display this SVG as an image?