使用 Raw-Loader 在 vue-component 中嵌入 SVG 标记

Question

我正在使用 webpack Raw-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 作为纯字符串获取，它不会转换为实际图像。

Answer 1

SVG 不会加载，因为它会在您使用的模式下转义，​​因为它可能是一个漏洞。要让它渲染，请使用 v-html 指令，该指令将注入 RAW 代码以使其工作。

这应该绝不用于用户生成的内容，只能用于您信任的内容。

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

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