CODEWITHSUNDEEP
javascriptsvgwebpackvue.js
LiranC
LiranC

Reputation: 2480

Embed SVG Markup inside vue-component, using Raw-Loader

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.

Upvotes: 2

Views: 3163

Answers (1)

nblackburn
nblackburn

Reputation: 268

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>

Upvotes: 2

Related Questions