vue中引入图片为什么使用require

require 是 node 中的一个方法：
他的作用是 “用于引入模块、 JSON、或本地文件”。
也就是说如果我们使用 require 来引入一个图片文件的话，那么 require 返回的就是用于引入的图片（npm 运行之后图片的编译路径）。 而如果使用字符串的话，那么则是一个 string 类型的固定字符串路径。

我们知道，src 中引入的图片应该为图片的本身路径（相对路径或者绝对路径），而 vue 项目通过 webpack 的 devServer 运行之后，默认的 vue-cli 配置下，图片会被打包成 name.hash 的图片名，在这种情况下，如果我们使用固定的 字符串路径则无法找到该图片，所以需要使用 require 方法来返回 图片的编译路径。

简单的说，使用require定义之后，你就可以动态**使用了，不用require你就只能写死的。**不用的话， :src=“’…/img/image.jpg’” 会被解析为字符串

require 方法介绍： http://nodejs.cn/api/modules.html#modules_require_id
1、一般情况下使用：

 <img src="../../assets/logo.png" alt="">

2、但是在有些需求下,图片需要在在js里面引入,这种情况下,vue中js引入图片,需要用requie.
案例1：

<template>
  <div class="vote-container">
      <div class="img" :style="{backgroundImage:'url('+src+')'}"></div>
      <img :src="src" />
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      src: require('../../assets/img.jpg')
    }
  }
}
</script>

案例2：

 <div style="display:flex;">
    <div v-for="item in imgUrl" :key="item.id">
      <img :src="item.imgSrc" class="num" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
    //下面的正确的  注意要用require
      imgUrl: [
        { id: 1, imgSrc: require("../../images/1.jpg") },
        { id: 2, imgSrc: require("../../images/2.jpg") },
        { id: 3, imgSrc: require("../../images/3.jpg") },
        
	    //下面是错误的
	    // {id: 1, imgSrc: "../../images/1.jpg"},
        // {id: 2, imgSrc: "../../images/2.jpg"},
        // {id: 3, imgSrc: "../../images/3.jpg"},
      ],
    };
  },
  created() {},
  methods: {}
};
</script>

<style>
	.num {
 	 margin-right: 1px;
  	 width: 300px !important;
  	 height: 300px !important;
     }
</style>