react能不能使用require

本文小編為大家詳細介紹“react能不能使用require”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當(dāng)，希望這篇“react能不能使用require”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

react能使用require，其正確的使用方法是：1、通過“”方式讀取圖片；2、使用“require('~/images/2.png').default”方式讀取圖片；3、將img字段拆分為文件名和圖片名兩個部分，然后使用“require('@/assets)”方式讀取即可。

本教程操作環(huán)境：Windows10系統(tǒng)、react18.0.0版、Dell G3電腦。

react能使用require嗎？

可以。

關(guān)于React項目中，require無法動態(tài)加載本地圖片的問題詳解

1. React加載本地圖片的方法

1.1 方法一

第一種方法相信大多數(shù)人用的比較多，而且出現(xiàn)無法加載圖片的錯誤比較少。

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

1.2 方法二

第二種方法也是比較常用，當(dāng)時使用require這個方法讀取本地圖片出現(xiàn)錯誤的概率很大，下面先給一個正常情況下能讀取圖片的方法，如下所示：

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

補充一句：require中只能寫字符串，不能寫變量。

2. 關(guān)于使用require無法加載圖片的解決方案

2.1 案例一

我們使用方法二讀取圖片，運行時卻無法加載出來圖片，對于這種問題我網(wǎng)上找了二種方案，第一種如下所示：

但是如果使用"file-loader": "^4.2.0"或者"file-loader": "^2.0.0"卻可以正常打包后來發(fā)現(xiàn)file-loader在新版本中esModule默認為true，因此手動設(shè)置為false

{
  test: /.(png|jpg|gif|jpeg)$/,
  use: [{
  loader: 'url-loader',
  // loader: 'file-loader',
  options: {
  esModule: false, // 這里設(shè)置為false
  name: '[name].[ext]',
  limit: 10240 
  } 
  }]
 }

方案二（推薦使用）

require('~/images/2.png').default 就好了

ps:但是如果使用react腳手架的配置是不需要用.default的，而是直接require(url)的

2.2 案例二

這個案例，時根據(jù)自己學(xué)習(xí)過程中碰到的，大致的描述我的需求：

首先，我使用React搭建一個后臺管理系統(tǒng)，然后需要將本地數(shù)據(jù)轉(zhuǎn)為json格式然后通過React讀取顯示到前端界面上，其中我的文件有文字以及圖片，文字很好讀取，關(guān)鍵時圖片如何獲取這是一個難點。所以我接下來說說我自己如何攻破這個難點的：

1）首先我截取一部分我的json數(shù)據(jù)如下所示：

{
  "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字段，得到的只是個鏈接，并不是圖片，所以需要使用下面這個標(biāo)簽才能顯示出圖片：

<img src={item.img} alt='圖片未顯示'/>

嗯嗯，看起來很完美，上面給的這個鏈接是在服務(wù)器上的是可以讀取到并顯示出來的，但是如果是本地圖片：

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

我們是無法讀取的，所以這個想法最終pass。

上面方法一和方法二這兩種辦法可以解決圖片不多，在前端直接加載圖片路徑的問題。那么，假設(shè)需要從數(shù)據(jù)庫中讀取圖片的路徑，require不能寫變量，import from后面也不能寫變量，那么該怎么辦呢。

之前不是說了require()里面?zhèn)魅氲闹荒転樽址?？所以我們可以將img字段拆分為2部分：文件名 + 圖片名

舉個例子：

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

圖片名：item.img （這個是我通過集合來遍歷所以這樣寫的）

將json里面img字段修改下:

"img": "logo.jpg"

最后相當(dāng)于字符串的拼接：@/assets/images/logo.jpg

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

這樣不就達到了我們的目的了？

如果這樣寫不能讀取出來那就按照下面這樣寫：

<img src={require('@/assets/images/'+ item.img).default} />

讀到這里，這篇“react能不能使用require”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。