react能使用require嗎
react能使用require，其正確的使用方法是：1、通過「
」方式讀取圖片；2、使用「require('~/images/2.png').default」方式讀取圖片；3、將img欄位拆分為檔名和圖片名兩個部分，然後使用「require('@/assets)」方式讀取即可。
本教學操作環境：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('../img/icon1.png')} 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: '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 src={item.img} alt='圖片未顯示'/>登入後複製嗯嗯，看起來很完美，上面給的這個連結是在伺服器上的是可以讀取到並顯示出來的，但是如果是本地圖片：
"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('@/assets/images/logo.jpg')登入後複製這樣不就達到了我們的目的了？
如果這樣寫不能讀取出來那就按照下面這樣寫：
<img src={require('@/assets/images/'+ item.img).default} />登入後複製推薦學習：《》
以上就是react能使用require嗎的詳細內容，更多請關注TW511.COM其它相關文章！