关于React项目中，require无法动态加载本地图片

朱雀 2023-01-22 10:52 6阅读 0赞

### 目录 ###

*  1. React加载本地图片的方法
 *   *  1.1 方法一
     *  1.2 方法二
 *  2. 关于使用require无法加载图片的解决方案
 *   *  2.1 案例一
     *  2.2 案例二
 *  3.参考文献

# 1. React加载本地图片的方法 #

## 1.1 方法一 ##

第一种方法相信大多数人用的比较多，而且出现无法加载图片的错误比较少。

import user from '../img/user.png'
    <img src={ user} alt="" />

## 1.2 方法二 ##

第二种方法也是比较常用，当时使用require这个方法读取本地图片出现错误的概率很大，下面先给一个正常情况下能读取图片的方法，如下所示：

补充一句：***require中只能写字符串，不能写变量***。

# 2. 关于使用require无法加载图片的解决方案 #

## 2.1 案例一 ##

我们使用方法二读取图片，运行时却无法加载出来图片，对于这种问题我网上找了二种方案，第一种如下所示：

但是如果使用"file-loader": "^4.2.0"或者"file-loader": "^2.0.0"却可以正常打包后来发现file-loader在新版本中esModule默认为true，因此手动设置为false
    
      { 
      test: /.(png|jpg|gif|jpeg)$/,
      use: [{ 
      loader: 'url-loader',
      // loader: 'file-loader',
      options: { 
      esModule: false, // 这里设置为false
      name: '[name].[ext]',
      limit: 10240 
      } 
      }]
     }

方案二（推荐使用）

require('~/images/2.png').default 就好了
    
    ps:但是如果使用react脚手架的配置是不需要用.default的，而是直接require(url)的

## 2.2 案例二 ##

这个案例，时根据自己学习过程中碰到的，大致的描述我的需求：  
首先，我使用React搭建一个后台管理系统，然后需要将本地数据转为json格式然后通过React读取显示到前端界面上，其中我的文件有文字以及图片，文字很好读取，关键时图片如何获取这是一个难点。所以我接下来说说我自己如何攻破这个难点的：  
1）首先我截取一部分我的json数据如下所示：

{ 
      "success": true,
      "msg": "",
      "titleImg": "http:\/\/iwen.wiki\/sxtstu\/blueberrypai\/indexImg\/youjiIcon_38.png",
      "travelnote": [
        { 
          "title": "\u8de8\u8d8a\u8d64\u9053\u7684\u871c\u6708\u884c-\u9189\u7f8e\u6bdb\u91cc\u6c42\u65af-1",
          "writer": "\u4f59\u982d\u5c0f\u59d0Rachel",
          "content": "\u82b1\u306e\u6642\u5149\u65c5\u884c \u3010\u6642\u5149\u65c5\u884c\u3011\u5e74\u8f7b\u5c31\u662f \u7528\u6765\u6298\u817e\u7684\uff0c\u6709\u529b\u6c14\u53bb\u60f3\uff0c \u53bb\u505a\uff0c\u800c\u662f\u4e3a\u4e86\u7a33\u5b9a\u4e22\u6389\u9752\u6625\uff0c\u4e3a\u4e86\u5e73\u6de1\u4e22\u6389\u68a6",
          "img": "http:\/\/iwen.wiki\/sxtstu\/blueberrypai\/indexImg\/youji_38.png"
        },
        { 
          "title": "\u8de8\u8d8a\u8d64\u9053\u7684\u871c\u6708\u884c-\u9189\u7f8e\u6bdb\u91cc\u6c42\u65af-2",
          "writer": "\u4f59\u982d\u5c0f\u59d0Rachel",
          "content": "\u82b1\u306e\u6642\u5149\u65c5\u884c \u3010\u6642\u5149\u65c5\u884c\u3011\u5e74\u8f7b\u5c31\u662f \u7528\u6765\u6298\u817e\u7684\uff0c\u6709\u529b\u6c14\u53bb\u60f3\uff0c \u53bb\u505a\uff0c\u800c\u662f\u4e3a\u4e86\u7a33\u5b9a\u4e22\u6389\u9752\u6625\uff0c\u4e3a\u4e86\u5e73\u6de1\u4e22\u6389\u68a6",
          "img": "http:\/\/iwen.wiki\/sxtstu\/blueberrypai\/indexImg\/youji_38.pngg"
    
        }
      ]
    }

2）我需要获取其中的字段img

"img": "http:\/\/iwen.wiki\/sxtstu\/blueberrypai\/indexImg\/youji_38.pngg"

然后我们获取到了img字段，得到的只是个链接，并不是图片，所以需要使用下面这个标签才能显示出图片：

嗯嗯，看起来很完美，上面给的这个链接是在服务器上的是可以读取到并显示出来的，但是如果是本地图片：

"img": "@/assets/imgs/cloud/Directory.svg"

我们是无法读取的，所以这个想法最终pass。  
无奈只能网上找找有没有其他方法，找了下下面这篇文章：  
[ES6 React 组件引用本地图片问题][ES6 React]  
这篇文章大致的意思就是：上面方法一和方法二这两种办法可以解决图片不多，在前端直接加载图片路径的问题。那么，假设需要从数据库中读取图片的路径，require不能写变量，import from后面也不能写变量，那么该怎么办呢。所以这篇文章看了下自己试了下没搞明白所以放弃了。

最后，看到了一篇文章使用的是require来读取，最终解决了我的问题，大家可以看看参考文献2，这里我说下思路吧。  
之前不是说了require()里面传入的只能为字符串？所以我们可以将img字段拆分为2部分：文件名 + 图片名

举个例子：  
文件名：’@/assets/images/’  
图片名：item.img （这个是我通过集合来遍历所以这样写的）

将json里面img字段修改下:
    "img": "logo.jpg"

最后相当于字符串的拼接：@/assets/images/logo.jpg

require('@/assets/images/logo.jpg')

这样不就达到了我们的目的了？  
如果这样写不能读取出来那就按照下面这样写：

# 3.参考文献 #

[1. 在react中img使用require无法引入图片][1. _react_img_require]

[2. 关于vue项目中，使用require动态加载本地图片][2. _vue_require]

[ES6 React]: https://blog.csdn.net/zhengjie0722/article/details/78862938
[1. _react_img_require]: https://segmentfault.com/q/1010000021600255
[2. _vue_require]: https://blog.csdn.net/qq_42939877/article/details/103876925