javascript - 使用Raw-Loader将SVG标记嵌入vue组件中

我正在用webpackRaw-loader导入svg。这意味着我希望将实际的svg xml嵌入到我的标记中。
我正在尝试执行以下操作：

<template>
  <div>
    {{svgLoader}}
  </div>
</template>

<script>
import svgLoader from '../assets/loader.svg'
export default {
  data: function () {
    return {
      svgLoader
    }
  }
}
</script>

但是，我将整个svg xml作为纯字符串获取，并且不会将其转换为实际图像。

最佳答案

SVG不会加载，因为它将在您使用的模式下转义，因为它可能是一个漏洞。要允许它呈现，请使用v-html指令，该指令将注入允许其工作的原始代码。
这不应该用于用户生成的内容，只应该用于您信任的内容。

<template>
  <div v-html="svgLoader"></div>
</template>

<script>
import svgLoader from '../assets/loader.svg'
export default {
  data: function () {
    return {
      svgLoader
    }
  }
}
</script>