React中插入图片的几种方式

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

import React from 'react'
import logo from './asset/logo.jpg'

export default class Login extends React.Component {
    render() {
        return (<>
            <img src={logo} alt="logo" />
        </>)
    }
}

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

<img src={require('../img/iconxx.png')} alt="" />

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

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

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

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

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

let url = './data/test.json'
const json1 = require(url);
const json2 = require(`${url}`);
const json3 = require(url + '');

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

"use strict";
__webpack_require__.r(__webpack_exports__);
var url = './data/test.json';
var json1 = __webpack_require__("./src sync recursive")(url);
var json2 = __webpack_require__("./src sync recursive ^.*$")("".concat(url));
var json3 = __webpack_require__("./src sync recursive ^.*$")(url + "");
console.log(json1, json2, json3);

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

function webpackEmptyContext(req) {
 var e = new Error("Cannot find module '" + req + "'");
 e.code = 'MODULE_NOT_FOUND';
 throw e;
}

webpackEmptyContext.keys = function() { return []; };

webpackEmptyContext.resolve = webpackEmptyContext;
module.exports = webpackEmptyContext;
webpackEmptyContext.id = "./src sync recursive";

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

作者：Chess
链接：https://www.zhihu.com/question/421711093/answer/1480054180
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

var map = {
  "./App": "./src/App.vue",
  "./App.vue": "./src/App.vue",
  "./components/HelloWorld": "./src/components/HelloWorld.vue",
  "./components/HelloWorld.vue": "./src/components/HelloWorld.vue",
  "./data/test": "./src/data/test.json",
  "./data/test.json": "./src/data/test.json",
  "./main": "./src/main.js",
  "./main.js": "./src/main.js",
  "./webpack": "./src/webpack.js",
  "./webpack.js": "./src/webpack.js"
};
function webpackContext(req) {
  var id = webpackContextResolve(req);
  return __webpack_require__(id);
}

webpackContextResolve(req) {
  if(!__webpack_require__.o(map, req)) {
    var e = new Error("Cannot find module '" + req + "'");
    e.code = 'MODULE_NOT_FOUND';
    throw e;
  }
  return map[req];
}
webpackContext.keys = function webpackContextKeys() {
  return Object.keys(map);
};

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

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