使用Vue引入SVG圖片

一、使用Vue引入SVG圖片

在Vue中，我們可以使用標籤或background屬性來引入一個SVG圖片。從Vue Loader 14.0.0開始，Vue Loader支持用import語句引入SVG文件。這個語法需要在項目中安裝svg-sprite-loader。

首先需要安裝svg-sprite-loader：

npm install svg-sprite-loader --save-dev

接著，新建一個Vue組件，命名為MyComponent.vue：

<template>
  <img src="./assets/logo.svg" alt="logo">
</template>

<script>
import logo from './assets/logo.svg';

export default {
  name: 'my-component',
  data() {
    return {
      logo
    };
  }
};
</script>

可以看到，在這個Vue組件中，我們使用import語句引入了”./assets/logo.svg”文件，並將其設置為了數據data中的一個屬性「logo」。在模板template中，我們直接使用了標籤來展示logo圖片。這樣就完成了一個使用Vue引入SVG圖片的場景。

二、使用Vuerequire引入SVG圖片

在Vue中使用vuerequire引入SVG圖片要實現的功能和使用Vue引入SVG圖片是一樣的，只是實現方式不同。Vuerequire是一個webpack-loader，它的作用是把一個SVG文件轉化成一個Vue組件。使用這個組件可以輕鬆地在一個Vue應用中使用SVG圖標。

首先需要在項目中安裝vuerequire-loader：

npm install vuerequire-loader --save-dev

接著，新建一個SVG文件：logo.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1200">
  <path d="M59.304,153.923c0-26.711,21.603-48.315,48.315-48.315 c26.711,0,48.315,21.603,48.315,48.315v780.43c0,26.711-21.604,48.315-48.315,48.315c-26.712,0-48.315-21.604-48.315-48.315V153.923z M283.056,900.959l308.623-352.479l-308.623-352.479 C265.527,159.064,256,170.504,256,187.346v738.309 C256,929.496,265.526,940.936,283.056,900.959z M947.373,153.923 c0-26.711,21.603-48.315,48.315-48.315c26.711,0,48.315,21.603,48.315,48.315v780.43c0,26.711-21.604,48.315-48.315,48.315c-26.712,0-48.315-21.604-48.315-48.315V153.923z"/>
</svg>

然後，在Vue組件中通過import引入logo.svg文件，然後在template中使用<svg-icon>組件來使用這個logo 圖標：

<template>
  <svg-icon :icon="logo"/>
</template>

<script>
import logo from './logo.svg';

export default {
  name: 'my-component',
  data() {
    return {
      logo
    };
  }
};
</script>

在這個Vue組件中，我們使用import語句引入了”./logo.svg”文件，並將其設置為了數據data中的一個屬性「logo」。在模板template中，我們使用了<svg-icon>組件並通過:icon屬性來指定了logo圖標。這樣就完成了一個使用vuerequire引入SVG圖片的場景。

三、一些注意事項

在使用Vue引入SVG圖片或者使用vuerequire引入SVG圖片時，需要注意以下幾點：

1.確認SVG圖片是可以在瀏覽器中正確顯示的。一些SVG圖片可能存在不準確的標記或不完整的結構，這會導致瀏覽器無法正確地渲染圖片的一部分或全部內容。

2.確保SVG圖片的屬性設置正確。在使用SVG圖片時，需要注意一些重要的屬性設置，比如viewBox、preserveAspectRatio、width和height等。這些屬性設置會影響圖片的渲染效果和展示方式。

3.使用import語句時，需要導入.svg文件，而不是引用.js或其他不合適的文件。如果導入了錯誤的文件，可能會導致應用程序無法編譯或啟動。

4.在template中使用<img>標籤或background屬性時，需要使用require語句。

5.使用Vue中的動態組件時，需要使用is屬性來指定要引用的組件名稱。