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

我正在使用 webpack 导入 SVG原始装载机 https://github.com/webpack-contrib/raw-loader。这意味着我想将实际的 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指令将注入原始代码，使其能够工作。

这应该NEVER用于用户生成的内容，仅将其用于您信任的内容。

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

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