跪求vue中使用use标签引入svg的正确方法？svg-sprite-loader这个东西的作用

Question

我希望在项目中可以这样引入svg： <svg>    <use :xlink:href="require('./xxx/xxx/xxx.svg')"></use> </svg>  但是这么做就会报一个地址的错误，然后我装了svg-sprite-loader，在webpack.base.conf.js中添加了 {    test: /\.svg$/,    use: {      loader: 'svg-sprite-loader',      query: {        name: '[name]_[hash:6]',        prefixize: true      }    }  },  但是发现依旧不行 （webpack的配置是vue-cli生成的）， 所以跪求大神叫我一下我应该这么做。我也很绝望。

Answer 1

先在js中引用，并加在data中

var svgUrl= require('./xxx/xxx/xxx.svg')

{

    data() {

        return {

            svgUrl

        }

    }

}

然后在模板中使用

 <svg>

    <use :xlink:href="svgUrl"></use>

 </svg>

Answer 2

打印出来是这个

Answer 3

你如果确实是按照原生的写法引入svg的化，可以专门维护一个svg symbol标签的vue组件，然后在入口处添加到页面上，比如main.vue中，只要把svg标签扔到了页面中就可以使用symbol 了，如果还嫌写 <svg> <use xxx> 麻烦的话可以把这个也写成一个动态组件，图在下面