首頁猿問跪求vue中使用use標(biāo)簽引入sv...

跪求vue中使用use標(biāo)簽引入svg的正確方法？svg-sprite-loader這個東西的作用

JavaScript

慕田峪4524236 2019-03-14 18:15:21

我希望在項(xiàng)目中可以這樣引入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 } } }, 但是發(fā)現(xiàn)依舊不行（webpack的配置是vue-cli生成的），所以跪求大神叫我一下我應(yīng)該這么做。我也很絕望。

查看完整描述

3 回答

慕碼人8056858

TA貢獻(xiàn)1803條經(jīng)驗(yàn) 獲得超6個贊

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

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

{

data() {

return {

svgUrl

}

然后在模板中使用

<svg>

</svg>

反對回復(fù) 2019-03-21

PIPIONE

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超9個贊

打印出來是這個

反對回復(fù) 2019-03-21

藍(lán)山帝景

TA貢獻(xiàn)1843條經(jīng)驗(yàn) 獲得超7個贊

你如果確實(shí)是按照原生的寫法引入svg的化，可以專門維護(hù)一個svg symbol標(biāo)簽的vue組件，然后在入口處添加到頁面上，比如main.vue中，只要把svg標(biāo)簽扔到了頁面中就可以使用symbol 了，如果還嫌寫 <svg> <use xxx> 麻煩的話可以把這個也寫成一個動態(tài)組件，圖在下面