首页  >  文章  >  web前端  >  react能使用require吗

react能使用require吗

藏色散人
藏色散人原创
2022-12-27 09:47:543449浏览

react能使用require,其正确的使用方法是:1、通过“”方式读取图片;2、使用“require('~/images/2.png').default”方式读取图片;3、将img字段拆分为文件名和图片名两个部分,然后使用“require('@/assets)”方式读取即可。

react能使用require吗

本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。

react能使用require吗?

可以。

关于React项目中,require无法动态加载本地图片的问题详解

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

1.1 方法一

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

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

1.2 方法二

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

<img src={require(&#39;../img/icon1.png&#39;)} alt="" />

补充一句: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: &#39;url-loader&#39;,
  // loader: &#39;file-loader&#39;,
  options: {
  esModule: false, // 这里设置为false
  name: &#39;[name].[ext]&#39;,
  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 src={item.img} alt=&#39;图片未显示&#39;/>

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

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

我们是无法读取的,所以这个想法最终pass。

无奈只能网上找找有没有其他方法,找了下下面这篇文章:

《ES6 React 组件引用本地图片问题》

这篇文章大致的意思就是:上面方法一和方法二这两种办法可以解决图片不多,在前端直接加载图片路径的问题。那么,假设需要从数据库中读取图片的路径,require不能写变量,import from后面也不能写变量,那么该怎么办呢。所以这篇文章看了下自己试了下没搞明白所以放弃了。

最后,看到了一篇文章使用的是require来读取,最终解决了我的问题,大家可以看看参考文献2,这里我说下思路吧。

之前不是说了require()里面传入的只能为字符串?所以我们可以将img字段拆分为2部分:文件名 + 图片名

举个例子:

文件名:’@/assets/images/’

图片名:item.img (这个是我通过集合来遍历所以这样写的)

将json里面img字段修改下:

"img": "logo.jpg"

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

require(&#39;@/assets/images/logo.jpg&#39;)

这样不就达到了我们的目的了?

如果这样写不能读取出来那就按照下面这样写:

<img src={require(&#39;@/assets/images/&#39;+ item.img).default} />

推荐学习:《react视频教程

以上是react能使用require吗的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn