Vue中對于img标簽引入svg圖檔失敗解決方案

在使用Vue.js中使用img的src引入svg路徑圖檔導緻的報錯，解決方案有以下兩種：

1. 可以通過import導入 然後将它變成data中的資料,再在img中綁定

<template>
	 <img :src="imagesUrl" alt=""/>
</template>

import svgImg from '../../assets/qiye.svg';
<script>
	export default {
	data(){
		return {
		imagesUrl: svgImg 
		}
	}
  }
</script>
           

2.将它注冊成元件:

<template>
 	<imagesSvg></imagesSvg>
</template>

import { imagesSvg } from './icon';

<script>
export default{
 components: {
    imagesSvg
  },
}
</script>
           

以上是兩種比較簡單的svg圖檔不顯示的解決問題，還有一種就是引入依賴去編譯，那種方法過去繁雜，項目中使用較少的svg圖檔以上兩種方法就能即使解決，如果項目過程中在多個元件中使用svg，可以考慮安裝依賴，網上也有很多方法，這裡就不依一介紹了，以上方法親測有效，不明白可以留言交流