关于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