web-dev-qa-db-fra.com

SVG en ligne dans le composant vuejs

J'ai créé un projet Vuejs en utilisant @ vue/cli version 3.0.0-beta.16 et dans mon composant de fichier unique Home.vue, je souhaite importer et ajouter un SVG en ligne dans le modèle, mais j'ai du mal à le faire.

Le problème est vue cli utilise déjà l'extension de fichier .svg pour le chargeur de fichiers comme ceci:

webpackConfig.module
  .rule('svg')
    .test(/\.(svg)(\?.*)?$/)
    .use('file-loader')
      .loader('file-loader')
      .options({
        name: getAssetPath(options, `img/[name].[hash:8].[ext]`)
      })

J'ai déjà essayé d'utiliser le plugin html-loader pour inclure svg dans le modèle et cela fonctionne très bien si j'efface l'utilisation par défaut de svg dans mon vue.config.js et ajoute mon propre chargeur comme ceci:

// vue.config.js

chainWebpack: config => {
    const svgRule = config.module.rule('svg')

    // clear all existing loaders.
    // if you don't do this, the loader below will be appended to
    // existing loaders of the rule.
    svgRule.uses.clear()

    // add replacement loader(s)
    svgRule
    .test(/\.(svg)$/)
    .use('html-loader')
    .loader('html-loader')
    .options({
    })
}

et dans mon modèle:

// Home.vue

<div v-html="require('./../assets/inline.svg')"></div>

Mais le problème est qu'il remplace également svg src dans les balises <img /> Par du code svg en ligne. Ce que je veux, c'est utiliser le chargeur de fichiers pour <img src="something.svg" /> Et utiliser le chargeur html pour require('./inline.svg'). Comment utiliser plusieurs chargeurs pour la même règle dans le webpack? Ou est-ce la bonne approche? Toute aide serait appréciée.

Edit Je pense que le problème est que j'ajoute les deux chargeurs dans le mauvais sens. Voici comment je les ajoute dans mon fichier:

// vue.config.js

svgRule
.test(/\.(svg)$/)
.use('file-loader')
.loader('file-loader')
.options({
  name: getAssetPath(options, `img/[name].[ext]`)
})

svgRule
.test(/\.(svg)$/)
.use('html-loader')
.loader('html-loader')
.options({
  attrs: ['div:v-html']
})
javascriptsvgwebpackvue.js
7
Atta ur Rehman

Vous y êtes presque, dites simplement à Webpack quel chargeur utiliser:

<div v-html="require('html-loader!./../assets/inline.svg')"/>
1
Lars Beck

Vous voudrez peut-être utiliser les deux chargeurs de webpack, mais aussi dire à votre chargeur html de se limiter aux éléments div avec v-html avec la syntaxe suivante dans les options du chargeur:

{
  attrs: ['div:v-html']
}

Les documents pour le chargeur html sont trouvés ici .

0
achelo

Vous pouvez ajouter un ! dans l'expression require pour "remplacer" les chargeurs existants configurés par la configuration du webpack.

<div v-html="require('!html-loader!./../assets/inline.svg')"></div>

Cela fonctionnera sans modification de vue.config.js (tant que html-loader est installé)

De plus, au lieu d'utiliser html-loader, regardez dans svg-inline-loader in peut ajouter des hachages aux classes et aux identifiants, vous n'avez donc pas à vous soucier des collisions de noms si vous avez plusieurs svgs en ligne sur votre page.

0
Igonato