J'essaye de charger un svg en ligne dans mon composant.
App.vue
template
props: ["url"],
methods: {
svgfile() {
var img = this.getImgUrl(this.url);
return img;
},
getImgUrl(pic) {
return require("../assets/" + pic);
},
loadSVG() {
var img = this.getImgUrl(this.url);
var svgraw;
this.$nextTick(() => {
fetch(img)
.then(res => res.text())
.then(svg => {
svgraw = svg;
});
});
return svgraw;
},
mounted() {
this.loadSVG();
}
}
};
anime.vue p >
<div>
<div v-html="this.loadSVG()"></div>
<img :src="this.svgfile()" alt />
</div>
<vue-anime :url="'planetiaermma.svg'" />
lancer svgfile () dans un : src fonctionne
le déclenchement de loadSVG () devrait le charger en ligne, cela ne semble pas cependant, même si le return svgraw; est dans une chaîne de html / xml.
p>
3 Réponses :
Je ne suis pas sûr de ce que vous obtenez de getImgUrl () mais pouvez-vous essayer ceci?
<img v-if="svgURL" :src="svgURL" alt />
data() {
return {
svgURL: null
}
}
mounted() {
loadSVG() {
this.svgURL = 'YOUR VALUE'
}
}
Vous pouvez également essayer ceci pour être sûr que ce n'est pas le cas d'une valeur manquante:
mounted() {
this.$nextTick(() => {
this.loadSVG();
});
}
Veuillez éviter d'utiliser this dans le modèle.
J'ai continué à obtenir non défini pour une raison quelconque. Mais j'ai réussi à le faire fonctionner. Mon problème était également que monté s'est terminé sur les crochets de la méthode.
App.vue
export default {
props: ["url"],
data() {
return {
mysvgfile: ""
};
},
methods: {
svgfile() {
var img = this.getImgUrl(this.url);
return img;
},
getImgUrl(pic) {
return require("../assets/" + pic);
},
loadSVG() {
var img = this.getImgUrl(this.url);
var outer = this;
this.$nextTick(() => {
fetch(img)
.then(res => res.text())
.then(svg => {
outer.mysvgfile = svg;
});
});
}
},
mounted() {
this.loadSVG();
}
};composant anime.vue
<template>
<div>
<div v-html="mysvgfile"></div>
</div>
</template>
<vue-anime :url="'planet.svg'" />
Vous pouvez simplement utiliser quelque chose comme vue-inline-svg code > pour cela:
<template>
<div>
<inline-svg :src="require(`../assets/${url}`)" />
<!-- You also can specify some props -->
<!-- width="150" -->
<!-- height="150" -->
<!-- :fill="false" -->
</div>
</template>
et enregistrez le composant globalement dans votre fichier main.js :
import Vue from 'vue'
import App from './App.vue'
import InlineSvg from 'vue-inline-svg';
Vue.component('inline-svg', InlineSvg);
new Vue({
render: h => h(App),
}).$mount('#app')
Après cela, vous pouvez utiliser le composant n'importe où dans vos modèles
Remarque: si vous utilisez des assets vue-loader ou vue-cli, alors les chemins comme '../assets/my.svg' ne seront pas gérés automatiquement par le file-loader comme vue-cli le fait pour la balise, donc vous le ferez besoin de l'utiliser avec require:
npm install vue-inline-svg
et débarrassez-vous de ce code compliqué.
Cool merci! Je cherchais un chargeur comme celui-ci. Je ne sais pas comment j'ai raté celui-ci. J'ai regardé le code source de celui-ci, il utilise la même idée que ce que j'ai fait en chargeant les données via une requête get. semble être le seul moyen de le charger en ligne.
Je regardais ce un au début, mais il a un < un href = "https://github.com/oliverfindl/vue-svg-inline-loader/issues/2#issuecomment-400548461" rel = "nofollow noreferrer"> problème avec les liaisons de vue, car ce chargeur uniquement analyse les fichiers statiques et ne gère pas la logique de vue à ce stade.