Kann eine Reaktionsnutzung erforderlich sein?

react kann require verwenden. Die richtige Verwendungsmethode ist: 1. Lesen Sie das Bild mit der Methode „“. 2. Verwenden Sie die Methode „require('~/images/2.png').default“. 3. Teilen Sie das IMG-Feld in zwei Teile, den Dateinamen und den Bildnamen, und verwenden Sie dann die Methode „require('@/assets)“, um es zu lesen.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.

Kann React in React verwendet werden?

Ja.

Detaillierte Erklärung des Problems, dass lokale Bilder in React-Projekten nicht dynamisch geladen werden können

1.1 Methode 1

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

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

2. Zur Lösung des Problems, dass das Bild nicht mit require geladen werden kann

2.1 Fall 1

require('~/images/2.png').default 1) Zuerst habe ich einen Teil meiner JSON-Daten abgefangen, wie unten gezeigt:

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

2) Ich muss das Feld img bekommen

{
  "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"
    }
  ]
}

Dann haben wir das Feld img, was Sie erhalten nur einen Link, kein Bild, daher müssen Sie den folgenden Tag verwenden, um das Bild anzuzeigen:

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

Hmm, es sieht perfekt aus. Der oben angegebene Link befindet sich auf dem Server und kann gelesen werden. Er wird angezeigt. aber wenn es ein lokales Bild ist:

<img src={item.img} alt=&#39;图片未显示&#39;/>

wir können es nicht lesen, also wurde diese Idee schließlich verworfen.

Ich hatte keine andere Wahl, als online nach anderen Methoden zu suchen, und fand den folgenden Artikel:

„Das Problem, dass ES6 React-Komponenten auf lokale Bilder verweisen“

Die allgemeine Bedeutung dieses Artikels ist: die obige Methode 1 und Methode 2 Diese Methode kann das Problem lösen, dass nicht viele Bilder vorhanden sind und der Bildpfad direkt im Frontend geladen wird. Angenommen, Sie müssen den Pfad des Bildes aus der Datenbank lesen, erfordern, dass Variablen nicht geschrieben werden können, und importieren aus, dass Variablen nicht geschrieben werden können. Was sollten Sie also tun? Nachdem ich diesen Artikel gelesen hatte, versuchte ich es, verstand es aber nicht und gab auf.

Endlich habe ich einen Artikel mit „require to read“ gesehen, der mein Problem endlich gelöst hat. Sie können einen Blick auf Referenz 2 werfen. Hier werde ich über meine Ideen sprechen.

Habe ich nicht schon gesagt, dass die Eingabe in require() nur Strings sein kann? So können wir das IMG-Feld in zwei Teile aufteilen: Dateiname + Bildname

Zum Beispiel:

Dateiname: '@/assets/images/'

Bildname: item.img (Das habe ich durchgemacht Sammlung Zum Durchlaufen, also schreiben Sie es so)

Ändern Sie das IMG-Feld in JSON:

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

Schließlich entspricht es dem Spleißen von Zeichenfolgen: @/assets/images/logo.jpg

"img": "logo.jpg"

Wird dies nicht erreicht unser Ziel?

Wenn du es nicht lesen kannst, wenn du es so schreibst, dann schreibe es so:

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

Empfohlenes Lernen: „

“

Das obige ist der detaillierte Inhalt vonKann eine Reaktionsnutzung erforderlich sein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!