Загрузка встроенного SVG в vuejs через опору в компонент - PullRequest
Новая
       24

Загрузка встроенного SVG в vuejs через опору в компонент

0 голосов
/ 05 февраля 2020

Я пытаюсь загрузить встроенный svg в свой компонент.

Приложение. vue

template 

<vue-anime :url="'planetiaermma.svg'" />

anime. vue

  <div>
    <div v-html="this.loadSVG()"></div>
    <img :src="this.svgfile()" alt />
  </div>


  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();
    }
  }
};

стрельба svgfile() в :src работает

стрельба loadSVG() должна загрузить его в строку, однако, похоже, что, хотя return svgraw; находится в строке html / xml.

Ответы [ 3 ]

1 голос
/ 05 февраля 2020

Вы можете просто использовать что-то вроде vue-inline-svg для этого: 

npm install vue-inline-svg

и зарегистрировать компонент глобально в файле 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')

После этого вы можете использовать компонент в любом месте внутри ваших шаблонов

Примечание: если вы используете vue -loader assets или vue -cli, то пути, такие как '../assets/my. svg 'не будет обрабатываться загрузчиком файлов автоматически, как vue -cli do for tag, поэтому вам нужно будет использовать его с require: 

<template>
  <div>
    <inline-svg :src="require(`../assets/${url}`)" />
 <!-- You also can specify some props -->
 <!-- width="150" -->
 <!-- height="150" -->
 <!-- :fill="false" -->
  </div>
</template>

и избавиться от этого грязного кода .

0 голосов
/ 05 февраля 2020

Приложение. vue

<vue-anime :url="'planet.svg'" />

аниме. vue компонент 

<template>
  <div>
    <div v-html="mysvgfile"></div>
  </div>
</template>



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();
  }
};
0 голосов
/ 05 февраля 2020

Я не уверен, что вы получаете от getImgUrl(), но не могли бы вы попробовать это? 

mounted() {
   this.$nextTick(() => {
    this.loadSVG();
   });
}

Вы также можете попробовать это, чтобы убедиться, что это не из пропущенного значения: 

<img v-if="svgURL" :src="svgURL" alt />


data() {
  return {
    svgURL: null
  }
}

mounted() {
  loadSVG() {
    this.svgURL = 'YOUR VALUE'
  }
}

Пожалуйста, избегайте использования this внутри шаблона.

...