Can react use require?

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

import user from &#39;../img/user.png&#39; <img src={user} alt="" />

1.2%20Method%202

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

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

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

2.%20About%20the%20solution%20that%20cannot%20load%20images%20using%20require

2.1%20Case%201

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

But%20if%20you%20use%20" file-loader or : can be packaged normally. later i found that defaults to true in esmodule the new version so manually set it 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?" >

Recommended learning: "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!