I am importing SVG with webpack Raw-loader. It means I want to embed the actual SVG XML inside my markup, as it is.
I am trying to do the following:
<template>
<div>
{{svgLoader}}
</div>
</template>
<script>
import svgLoader from '../assets/loader.svg'
export default {
data: function () {
return {
svgLoader
}
}
}
</script>
However, I get the entire SVG XML as pure string and it doesn't get converted to the actual image.
The SVG won't load because it will be escaped in the mode you are using as it could be a vulnerability. To allow it to render, use the v-html directive which will inject the RAW code allowing it to work.
This should NEVER be used for user generated content, only ever use it for content you trust.
<template>
<div v-html="svgLoader"></div>
</template>
<script>
import svgLoader from '../assets/loader.svg'
export default {
data: function () {
return {
svgLoader
}
}
}
</script>
