關於vue加載圖片正確姿勢(個人理解)

在項目中加載圖片是一件再正常不過的事情了，但是根據框架的不同，加載的方式和所產生的性能也會有所不同，

下面是關於vue加載圖片的個人理解。

我們最簡單的加載圖片方式，可以像下面這樣

<img src="../../img/圖片信息"/>

這是第一個會想到的方式，這也是可行的。但是下面這種方式不行了

<template>
  <img :src="url" />
<template>
<script>
  export default {
    data () {
      return {
        url: '../../img/one.png' 
     } 
    }
  }
</script>

因為webpack在打包的過程中會把url解析成一個字符串

所以，我們需要這樣做

<template>
  <img :src="url" />
<template>
<script>
  export default {
    data () {
      return {
        url: require( '../../img/one.png') 
     } 
    }
  }
</script>

還有下面這種方式

<template>
  <img :src="url" />
<template>
<script>
import {imgOne} from '...路徑'
  export default {
    data () {
      return {
        url: imgOne
     } 
    }
  }
</script>

以上兩種方式都是在項目中加載靜態圖片的方式。

當然這是不夠的，在實際項目中，我們做的最多的是通過ajax請求返回過來的圖片

這點的話，第一種方式是可以讓后台人員直接傳圖片的dataUrl過來。

第二種方式，就是加上cdn

第三種方式，就是通過圖片懶加載  這里有圖片懶加載的具體用法文章:  http://www.jb51.net/article/121835.htm