vue项目中如何引入图片

1、直接使用 相对路径 / 绝对路径 引入图片

<template>
    <!-- 普通引入 -->
    <img src = "../assets/images/01.jpg">  
    <!-- webpack编译处理后: -->
    <img src = "/img/01.f0afc36d.jpg">

    <!--'/images/'+图片名称，这种属于绝对路径，/指向public目录 --> 
    <img src="/images/image.png">
<template>

2、使用require引入图片

在变量中使用require引入地址。

<template>
  <div>
    <!-- 用法1 -->
    <img :src="image" alt="图片" />
    <!-- 用法2 -->
    <img :src="require('../assets/image.png')" alt="图片" />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        image: require('../assets/image.png')
      }
    }
  }
</script> 

3、使用import引入图片

直接将图片引入为模块使用。

<template>
  <div>
    <img alt="如果看不清楚，请单击图片刷新！" :src="captcha" width="110" height="32" />
    <img :src="emptyTable" width="110" height="32" />
  </div>
</template>

<script>
  import image from '../assets/image.png';
  import emptyTable from '@/images/empty-img-gray.svg';
  export default {
    data() {
      return {
        image: image,
        emptyTable  // emptyTable: emptyTable的语法糖
      }
    }
  }
</script> 

 require与import方法的区别

require 是赋值过程，其实 require 的结果就是对象、数字、字符串、函数等，再把 require 的结果赋值给某个变量。

import 是解构过程，但是目前所有的引擎都还没有实现 import，我们在 node 中使用 babel 支持 ES6，也仅仅是将 ES6 转码为 ES5 再执行，import 语法会被转码为 require。

4、网络图片在data的变量中声明使用

<template>
  <div>
    <img :src="image" alt="图片" />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        image: "https://www.test.com/saodgnasgo.jpg"
      }
    }
  }
</script>