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

Ich glaube, dass die meisten Leute die erste Methode verwenden Es gibt relativ wenige Fehler, die nicht geladen werden können.

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

1.2 Methode 2

Die zweite Methode wird ebenfalls häufiger verwendet. Zu dieser Zeit bestand eine hohe Fehlerwahrscheinlichkeit, wenn die Anforderungsmethode zum Lesen lokaler Bilder verwendet wurde. wie folgt:

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

Noch etwas: In require können nur Strings geschrieben werden, keine Variablen.

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

2.1 Fall 1

Wir verwenden Methode 2, um das Bild zu lesen, aber das Bild kann zur Laufzeit nicht geladen werden Für dieses Problem online lautet das erste wie folgt:

Aber wenn Sie „file-loader“: „^4.2.0“ oder „file-loader“: „^2.0.0“ verwenden, kann es normal gepackt werden. Später habe ich herausgefunden, dass der Dateilader in der neuen Version standardmäßig auf „true“ eingestellt ist. Setzen Sie ihn also manuell auf „false“. Option 2 (empfohlen) Sie müssen nicht .default verwenden, sondern benötigen direkt (url) von

2.2 Fall 2

Dieser Fall beschreibt grob meine Bedürfnisse basierend auf dem, was mir während meines Studiums begegnet ist:

Zuerst habe ich React verwendet, um ein Backend zu erstellen Managementsystem, und dann musste ich die lokalen Daten in JSON konvertieren. Das Format wird dann über React gelesen und auf der Front-End-Oberfläche angezeigt. Meine Datei enthält Text und Bilder ein schwieriger Punkt im kritischen Moment. Lassen Sie mich darüber sprechen, wie ich diese Schwierigkeit gelöst habe:

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: „

Video-Tutorial reagieren

“

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!