Vue项目图片引用的方法

今天来总结一下Vue项目图片引用的方法
演示使用的是使用webpack模板创建的vue项目，目录结构是这样的：

我的图片存放在assets下的img下。

1.使用img标签应该这么引用：
在data里面定义变量test，test的值为require+（图片从src下开始的路径）

<template>
  <div>
    <img class="acc" :src="test1" >
  </div>
</template>

 data(){
    return{
      test1:require('../assets/img/logos.png'),
    }
  },

注意前面 一定是要有require的，单单写路径进去是不对的，要有require导入，这篇文章对于导出和导入有细致的解释。*

https://blog.csdn.net/Deft_MKJing/article/details/80388770

实现效果：这里的紫框里面的图片就是用img导入的

2.以背景图片的方式导入：我们都知道style里面可以设置背景图片，注意的是这个写法是驼峰式的backgroundImage，backgroundPosition…等等，你可以只给它定义成简单地变量传一个路径就行，还可以给他定义成一个对象，使用的时候也会方便哦

<template>
  <div>
  <div class="logins_box" :style="{backgroundImage:test2}"></div>
  <div class="logins_box" :style="test3"></div>
  </div>
</template>

  data(){
    return{
      test2:"url(" +require("../assets/img/login_img1.jpg") + ")",
      test3:{
       backgroundImage:"url("+require("../assets/img/login_img1.jpg")+")",
       backgroundSize:"cover"
     }
    }
  },

这次，前面拼接了url，我们也知道正常来说我们使用背景图片引入，都是url（“路径”）。

注意如果图片引入失败请注意，你的Style前面是否有“：”号，有的话你才可以在后面接变量内容。*
3.先用import 引入，在调用

<template>
  <div>
    <img class="acc" :src='test4' >
  </div>
</template>

<script>
import test4s from "../assets/img/login_img1.jpg"
export default {
  data(){
    return{
     test4:test4s
    }
  },
}
</script>

一切皆小白！
我是胖某人，大家一起来学习吧。