iT邦幫忙

0

Vue Component使用fetch讀入SVG inline問題

RC 2019-04-17 14:35:25468 瀏覽

因為svg檔案過大(>500k),不適合併入js,想要使用從src讀入svg整個內容。

vue-svg-spritevue-svg-loadervue-svg-inline-loader已試過,都是併入JS的方式

參考Jacky發表於Medium的方法〈Simple loading svg inline in Vue〉建立SvgInline.vue

<template>
    <span class="icon"></span>
</template>
<script>
let cache = new Map();
export default {
  props: {
    src: { type: String, required: true }
  },
  async mounted() {
    if (!cache.has(this.src)) {
      try {
        cache.set(this.src, fetch(this.src).then(r => r.text()));
      } catch (e) {
        cache.delete(this.src);
      }
    }
    if (cache.has(this.src)) {
      this.$el.innerHTML = await cache.get(this.src);
    }
  }
};
</script>

於view頁面上讀入svg

<template>
	<div>
		<svg-inline src="@/assets/img/svginlineitem.svg" />
	</div>
</template>

<script>
import SvgInline from '@/components/SvgInline.vue'

export default {
	components: {
		SvgInline
	}
}
</script>

svg圖片放置於assets/img資料夾內,會跟著webpack編譯而變動,但路徑部分始終無法變動。
請問是哪裡寫錯嗎?

marlin12 iT邦新手 3 級 ‧ 2019-04-17 19:18:55 檢舉
如果你是用nuxt,就要把那個svg檔放在static資料夾內,然後把呼叫組件改為<svg-inline src="/svginlineitem.svg" />。

尚未有邦友回答

立即登入回答