Bolehkah penggunaan bertindak balas memerlukan?

react boleh menggunakan require. Cara yang betul untuk menggunakannya ialah: 1. Baca imej melalui kaedah "

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

Salin selepas log masuk

1.2 Kaedah 2

Kaedah kedua juga lebih biasa digunakan pada masa itu, kebarangkalian ralat dalam membaca imej tempatan menggunakan kaedah memerlukan adalah sangat tinggi kaedah yang boleh digunakan dalam keadaan biasa Kaedah membaca imej adalah seperti berikut:

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

Ayat tambahan: Hanya rentetan yang boleh ditulis dalam memerlukan, bukan pembolehubah.

2. Penyelesaian kepada masalah bahawa imej tidak boleh dimuatkan menggunakan memerlukan

2.1 Kes 1

Kami menggunakan kaedah 2 untuk membaca imej, tetapi ia tidak boleh dimuatkan pada masa jalan Muatkan imej Untuk masalah ini, saya menemui dua penyelesaian dalam talian Yang pertama adalah seperti berikut:

Tetapi jika anda menggunakan "pemuat fail": "^4.2.0" atau ". file-loader" : "^2.0.0" boleh dibungkus seperti biasa. Kemudian, saya mendapati pemuat fail lalai kepada true dalam esModule dalam versi baharu, jadi saya menetapkannya secara manual kepada false

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

Pilihan 2 (disyorkan)

require('~/images/2.png').default Baiklah

ps: Tetapi jika anda menggunakan konfigurasi perancah bertindak balas, anda tidak perlu menggunakan .default, tetapi secara langsung memerlukan(url)

2.2 Kes 2

Kes ini secara kasarnya menerangkan keperluan saya berdasarkan apa yang saya temui semasa kajian saya:

Pertama, saya menggunakan React untuk membina sistem pengurusan bahagian belakang, dan kemudian saya perlukan untuk menukar data tempatan ke dalam format json Ia dibaca dan dipaparkan pada antara muka hadapan melalui React Fail saya mengandungi teks dan gambar . Jadi izinkan saya bercakap tentang cara saya menyelesaikan kesukaran ini:

1) Mula-mula, saya memintas sebahagian daripada data json saya seperti yang ditunjukkan di bawah:

{
  "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) Saya perlu mendapatkan Medan img

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

Kemudian kita mendapat medan img, dan apa yang kita dapat hanyalah pautan, bukan gambar, jadi kita perlu menggunakan tag berikut untuk memaparkan gambar:

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

Hmm , kelihatan sempurna Pautan yang diberikan di atas adalah pada pelayan dan boleh dibaca dan dipaparkan, tetapi jika ia adalah imej tempatan:

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

kami tidak dapat membacanya, jadi idea ini akhirnya lulus. .

Saya tiada pilihan selain mencari kaedah lain dalam talian, dan menemui artikel berikut:

"Masalah komponen ES6 React yang merujuk imej tempatan"

Artikel ini ialah kira-kira sama Maksudnya ialah: dua kaedah di atas, kaedah satu dan kaedah dua, boleh menyelesaikan masalah tidak mempunyai banyak gambar dan memuatkan laluan gambar terus di hujung hadapan. Jadi, katakan anda perlu membaca laluan imej daripada pangkalan data, memerlukan tidak boleh menulis pembolehubah, dan import daripada tidak boleh menulis pembolehubah, jadi apa yang perlu anda lakukan? Jadi selepas membaca artikel ini, saya mencubanya dan tidak memahaminya, jadi saya berputus asa.

Akhirnya, saya melihat artikel menggunakan require to read, yang akhirnya menyelesaikan masalah saya Anda boleh lihat Rujukan 2. Di sini saya akan memberi anda beberapa idea.

Bukankah saya telah mengatakan sebelum ini bahawa input dalam require() hanya boleh menjadi rentetan? Jadi kita boleh bahagikan medan img kepada 2 bahagian: nama fail + nama imej

Contohnya:

Nama fail: '@/assets/images/'

Nama imej : item.img (Saya menulis ini kerana saya melintasi koleksi)

Ubah suai medan img dalam json:

"img": "logo.jpg"

Akhir sekali, ia bersamaan dengan penyambungan rentetan: @/ assets/images/logo.jpg

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

Adakah ini mencapai matlamat kita?

Jika anda tidak dapat membacanya apabila anda menulisnya seperti ini, maka tuliskannya seperti berikut:

<img  src={require(&#39;@/assets/images/&#39;+ item.img).default} / alt="Bolehkah penggunaan bertindak balas memerlukan?" >

Pembelajaran%20yang%20disyorkan:%20" href="https://www.php.cn/course/list/21.html" target="_blank">tutorial video bertindak balas"

Atas ialah kandungan terperinci Bolehkah penggunaan bertindak balas memerlukan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!