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>

使用Raw-Loader在SV-component内嵌入SVG标记

1 个答案: