Several ways to introduce pictures in react projects

The img tag introduces the image

Because react actually renders the page through the js reader function, you cannot import the image by directly writing src="path"

We can import images just like importing modules

import img from './../../../../asset/img/user.png'

Need to be introduced in the following way

<img src={require('../images/picture.png')} alt="label"/>

Background image introduction

1 The first is to create a new CSS file in a regular way, and then you can directly write the CSS syntax

.img {
   background: url('../images/picture.png') 0 0 no-repeat;
}

2 The second way is to introduce it in the react component through variables, and then directly assign the variables to the img tag

// Import image file import bg from '../images/bg.png'
// Define a style object by string concatenation const imgStyle = {
  width: '100%',
  height: '500px',
  backgroundImage: 'url(' + bg + ')',
  backgroundPosition: 'center 0',
  backgroundSize: '2045px 472px',
  backgroundRepeat: 'no-repeat'
}
class Home extends Component {
 constructor () {
  super (props)
 }
 render() {
  //Finally assign the variable directly to the tag <div style="imgStyle">
   ...
  </div>
 }
}

require

We can also wrap the relative path with require and assign it directly to src, just like in vue.

<img width="100" height="100" src={require('./../../../../asset/img/user.png')} alt="" className={'user-img'}/>

**Note:** There is a problem here because there are some minor differences due to different versions of the file-loader library. In higher versions of the file-loader library, esModule defaults to true, and require returns an ES module instead of a string path. The default attribute of this ES module is a string path, so it should be written like this:

<img width="100" height="100" src={require('./../../../../asset/img/user.png').default} alt="" className={'user-img'}/>

We should not worry about the version of our file-loader. When we use require directly and still cannot display the image normally, we can add .default after require.

This concludes this article about several ways to introduce images into react projects. For more relevant content about introducing images into react, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!