"; 2. Use "require('~/images/2.png').default" method to read the image; 3. Split the img field into two parts: file name and image name, and then use "require('@/assets)" method to read it Just take it."/> "; 2. Use "require('~/images/2.png').default" method to read the image; 3. Split the img field into two parts: file name and image name, and then use "require('@/assets)" method to read it Just take it.">

Home  >  Article  >  Web Front-end  >  Can react use require?

Can react use require?

藏色散人
藏色散人Original
2022-12-27 09:47:543471browse

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

Can react use require?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: &#39;url-loader&#39;,
  // loader: &#39;file-loader&#39;,
  options: {
  esModule: false, // 这里设置为false
  name: &#39;[name].[ext]&#39;,
  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(&#39;@/assets/images/logo.jpg&#39;)

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn