vue项目动态引入图片，使用require

require是什么

• node模块中，我们采用的是CommonJS规范，使用require引入模块。
• require的作用是：用于引入模块、JSON或者本地文件。

vue项目下引入图片

src

	<template>
		<div>
			<img src='img/test.jpg'>
		</div>
	</template>

在src中引入图片的情况下，src对应的值写图片绝对路径或者相对路径是没有问题的。

require

• 而在vue项目中，或者其他前端项目中，有时候引入图片需要根据不同情况显示不同的图片，当采取在<script></script>标签内定义一个图片路径变量的时候，我们就需要使用require来引入图片，实现图片的动态展示。例如：

  <script>
  	export default{
  		data(){
  			return {
  				imgPath:require('img/test.jpg')
  			}
  		}
  	}
  </script>
  

• 因为当我们使用require引入一个图片文件，require返回的是npm运行之后图片的编译路径。

• 如果使用字符串string的话，则该路径是一个固定字符串，在npm运行之后，图片会找不到，无法正常显示。