Vue项目图片引用的方法

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导入，这篇文章对于导出和导入有细致的解释。*

实现效果：这里的紫框里面的图片就是用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>

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