」方式讀取圖片;2、使用「require('~/images/2.png').default」方式讀取圖片;3、將img欄位分割成檔案名稱和圖片名稱兩個部分,然後使用「require('@/assets)」方式讀取取即可。"/> 」方式讀取圖片;2、使用「require('~/images/2.png').default」方式讀取圖片;3、將img欄位分割成檔案名稱和圖片名稱兩個部分,然後使用「require('@/assets)」方式讀取取即可。">

首頁  >  文章  >  web前端  >  react能使用require嗎

react能使用require嗎

藏色散人
藏色散人原創
2022-12-27 09:47:543464瀏覽

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