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

SVG

关注

发信

关注(28)粉丝(399)

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

本文介绍了使用 Raw-Loader 在 vue-component 中嵌入 SVG 标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用 webpack Raw-loader 导入 SVG.这意味着我想将实际的 SVG XML 嵌入到我的标记中.

我正在尝试执行以下操作:

<div>{{svgLoader}}

<脚本>从 '../assets/loader.svg' 导入 svgLoader导出默认{数据:函数(){返回 {SVG加载器}}}

但是，我将整个 SVG XML 作为纯字符串获取，并且不会转换为实际图像.

解决方案

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

这应该绝不用于用户生成的内容，仅用于您信任的内容.

<div v-html="svgLoader"></div></模板><脚本>从 '../assets/loader.svg' 导入 svgLoader导出默认{数据:函数(){返回 {SVG加载器}}}

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.

解决方案

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>

这篇关于使用 Raw-Loader 在 vue-component 中嵌入 SVG 标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

10-16 06:58