在 Vue 中动态获取一个 svg 文件作为文本

Question

我正在使用需要 html 作为字符串的库（传单）。我将 svgs 保存在资产中。到目前为止，这是我的方法

getSvg( file ) {
  try {
    const name = file.substr( 0, file.lastIndexOf( '.' ) )
    return require( `@/assets/icons/profile/${ name }.svg` )
  } catch ( e ) { 
    return null
  }
}

我怎样才能从中获取字符串形式的 svg 元素？我也试过这样做

'<img :src=${ svg }/>'

但这并没有绘制 svg

Answer 1

使用raw-loader获取SVG文件的原始文本：

安装raw-loader
```
npm install -D raw-loader
```

导入路径前缀!!raw-loader!，得到导入值的default属性：

return require( `!!raw-loader!@/assets/icons/profile/${ name }.svg` ).default

在 Vue 中动态获取一个 svg 文件作为文本

Get an svg file as text dynamically in Vue

svg

leaflet

webpack

vue.js