Can react use require?

react can use require. The correct way to use it is: 1. Read the image through the "

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

Copy after login

1.2 Method 2

The second method is also more commonly used. At that time, using the require method to read local images had a high probability of errors. Here is a method that can be read under normal circumstances. The method in the picture is as follows:

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

Additional sentence: Only strings can be written in require, not variables.

2. About the solution that cannot load images using require

2.1 Case 1

We use method 2 to read images, but it cannot be loaded at runtime Load the image. For this problem, I found two solutions online. The first one is as follows:

But if you use "file-loader": "^4.2.0" or "file-loader" : "^2.0.0" can be packaged normally. Later, I found that file-loader defaults to true in esModule in the new version, so I manually set it to false

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

Option 2 (recommended)

require('~/images/2.png').default Just fine

ps: But if you use react scaffolding configuration, you don’t need to use .default, but directly require( url)

2.2 Case 2

This case roughly describes my needs based on what I encountered during my learning process:

First, I used React to build A backend management system then needs to convert local data into json format and then read it through React and display it on the front-end interface. My file contains text and pictures. The text is easy to read. How to obtain the pictures is a difficult point at the critical moment. So let me talk about how I overcame this difficulty:

1) First, I intercepted a part of my json data as shown below:

{
  "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) I need to get the field img in it

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

Then we get the img field, and what we get is just a link, not a picture, so we need to use the following tag to display the picture:

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

Hmm, it looks perfect, The link given above can be read and displayed on the server, but if it is a local image:

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

we cannot read it, so this idea finally passed.

I had no choice but to look online for other methods, and found the following article:

"ES6 React component referencing local images problem"

This article is roughly What it means is: the above two methods, method one and method two, can solve the problem of not having many pictures and loading the picture path directly on the front end. So, suppose you need to read the path of the image from the database, require cannot write variables, and import from cannot write variables, so what should you do? So after reading this article, I tried it and didn’t understand it, so I gave up.

Finally, I saw an article using require to read, which finally solved my problem. You can take a look at Reference 2. Here I will talk about my ideas.

Didn’t I say before that the input in require() can only be a string? So we can split the img field into 2 parts: File name Image name

For example:

File name: '@/assets/images/'

Picture Name: item.img (I wrote this because I traversed through the collection)

Modify the img field in json:

"img": "logo.jpg"

Finally, it is equivalent to the splicing of strings: @/assets /images/logo.jpg

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

Doesn’t this achieve our goal?

If you can’t read it when you write it like this, then write it like this:

<img  src={require(&#39;@/assets/images/&#39;+ item.img).default} / alt="Can react use require?" >

%20Recommended%20learning:%20" href="https://www.php.cn/course/list/21.html" target="_blank">react video tutorial"

The above is the detailed content of Can react use require?. For more information, please follow other related articles on the PHP Chinese website!