一、通过import方式（适用于插入静态图片）：

2、使用require方法（可以使用此方法插入动态图片）：

require中不能有纯粹的代表图片地址的变量，但是可以通过变量和字符串拼接的方式来使用此方法。

但此种方法可能会出现不报错图片也不显示的问题，因为require是动态加载，import是静态编译（也就是说用第1种方法不会出现这个问题），解决方案：

在引入的图片处加.default就可以了。

react/vue项目require引入文件不能直接用变量接收地址？

这不是 react/vue 项目的问题，也不是 引入 json 才会有的问题，而是因为 webpack 本身不支持 require 变量名的。webpack require 为什么不支持变量呢？这是因为 webpack 是一个构建工具，而他的核心思想是一切都是模块，根据模块的依赖关系进行打包，而这些模块必须要是本地资源，既然是本地资源，就肯定是确定的资源，而没有必要使用未知的变量资源。回到楼主的问题，为什么只用变量名就不行，而用字符串模板或变量名+空字符串就行：

如上，json1 会报错，而 json2 和 json3 确能正常引入为什么呢？webpack 只是一个打包工具，他最终输出的代码还是要在浏览器上运行的，所以可以尝试从浏览器上面的代码来分析一下到底怎么回事。我们在浏览器 app.js 文件中看到以上代码被编译成了如下：

 可以看到， require 都被转换成 ___webpack_require__ 了，但是 json1 和 json2/json3 有个明显的不同，json1 的第一个参数是 ./src sync recursive  ，而 json2/json3 的第一个参数都是 ./src sync recursive ^.*$  这两个到底是什么东西呢？我也不知道，所以在 app.js 文件中搜索一下，发现如果请求参数是 ./src sync recursive 则会调用下面的代码，他的结果是抛出一个 cannot find module  错误：

而如果是 ./src sync ^.*$ ，则会执行以下代码，他会从 map 映射表中找到对应的资源的，如果找到，就正常返回，如果 map 中不存在也会报错：

 到此，我们也大概明白了为什么 require“纯变量”不行，而 require 字符串模板或变量+空字符却可以了，这是因为 webpack 在编译代码的时候处理的不一样。

3、css中可以通过直接使用图片地址的方式来引用图片(和原生的一样)。