Knowledge about images in react development

React is a popular JavaScript library used for building user interfaces. In React development, pictures are a very important element that can be used to beautify the interface and display content. This blog will explain in detail the knowledge about images in React.

1. Using images in React

Using images in React is very simple, just use the img tag. For example:

import React from 'react';
import logo from './logo.png';

function App() {
    
    
  return (
    <div>
      <img src={
    
    logo} alt="Logo" />
    </div>
  );
}

export default App;

In the above example, we used the img tag to display images. It should be noted that we use a variable logo to introduce the image. This variable is introduced through the import statement. This method allows us to manage images more conveniently during development.

2. Using images in JSX files

Using images in JSX files is also very simple, just use the img tag just like in HTML. For example:

import React from 'react';
import logo from './logo.png';

function App() {
    
    
  return (
    <div>
      <h1>Welcome to My Website</h1>
      <img src={
    
    logo} alt="Logo" />
    </div>
  );
}

export default App;

In the above example, we used the img tag in the JSX file to display the image. It should be noted that we use the variable logo to introduce the image. This variable is introduced through the import statement.
Show results

3. Use images in CSS files

Using images in CSS files is also very simple, just use the url() function. For example:

.logo {
    
    
  background-image: url('./logo.png');
}
.n-pglg {
    
    
    background: url('../../static/images/mymusic.png') no-repeat;
}
从当前出发 找到图片

In the above example, we used the url() function to import images. Note that the path is relative to the CSS file.

4. Explanation of the path of the image

In React, there are three common ways to represent paths: relative paths, absolute paths, and alias paths.

• Relative path: A path starting with . or... represents a path relative to the current file. For example: ./logo.png represents the logo.png file in the current folder.
• Absolute path: A path starting with / represents a path relative to the project root directory. For example: /src/logo.png represents the logo.png file in the src folder in the project root directory.
• Alias ​​path: Use @ or ~ to indicate an alias, which can be configured in the webpack configuration file. For example: @/assets/logo.png represents the logo.png file in the assets folder in the src folder in the project root directory.

5. Examples of using images

Here is an example of using images, showing how to use images in React:

import React from 'react';
import logo from './logo.png';
import './App.css';

function App() {
    
    
  return (
    <div className="App">
      <header className="App-header">
        <img src={
    
    logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

In the above example, we use the img tag to display images and the import statement to introduce images.

6. The difference between using images and HTML in React

In React, working with images is very similar to how you work with HTML. However, there are some differences to note:

• In React, you need to use the import statement to introduce images.
• In React, you need to use {} to wrap the variable name, indicating that it is a JavaScript expression.
• In React, className needs to be used instead of the class attribute in HTML.

In short, using images in React is very simple, you just need to master the above knowledge points.