【React】在 React 项目中引入图片

import

import React from 'react';
import myImage from './path/to/image.jpg';

function MyComponent() {
    
    
  return <img src={
    
    myImage} alt="description" />;
}

require（虽然现在比较少用）

import React from 'react';

function MyComponent() {
    
    
  const myImage = require('./path/to/image.jpg');
  return <img src={
    
    myImage} alt="description" />;
}

直接使用图片的 URL

（适用于公共资源或外部链接）

import React from 'react';

function MyComponent() {
    
    
  return <img src="https://example.com/path/to/image.jpg" alt="description" />;
}

如果要选择哪种方式更好，我个人推荐使用 import 语句。因为这种方式能够更好地集成到现代化的 JavaScript 打包工具（如 Webpack）中，提供诸如代码分割、缓存优化等功能。此外，import 语句更加符合 ES6+ 规范，使代码可读性和可维护性都有所提升。

其他

1）使用 CSS 背景图

.background-image {
    
    
  background: url('./path/to/image.jpg');
}

在 CSS 模块中：可以通过样式绑定背景图片，适用于背景图片或装饰性小图标。

2）使用 CSS-in-JS 库 如果你在使用 styled-components、emotion 等 CSS-in-JS 库，也可以在 JavaScript 中直接定义样式：

复制代码
import styled from 'styled-components';
import myImage from './path/to/image.jpg';

const ImageContainer = styled.div`
  background: url(${
      
      myImage}) no-repeat center center;
  width: 100px;
  height: 100px;
`;

3）结合 Webpack 加载器 Webpack 通常会配置文件加载器（如 file-loader 或 url-loader），以便在引入图片时进行优化，具体配置可以参考 webpack 文档。

4）动态引入图片 有时我们需要根据某些条件动态引入图片，这种情况下可以使用 import() 动态导入：

import React, {
    
     useState, useEffect } from 'react';

function MyComponent() {
    
    
  const [image, setImage] = useState(null);

  useEffect(() => {
    
    
    import('./path/to/image.jpg').then(img => {
    
    
      setImage(img.default);
    });
  }, []);

  if (!image) return <p>Loading...</p>;

  return <img src={
    
    image} alt="description" />;
}

5）SVGR 处理 SVG 如果处理的是 SVG 图像，可以将其作为 React 组件导入：

import React from 'react';
import {
    
     ReactComponent as MySvg } from './path/to/image.svg';

function MyComponent() {
    
    
  return <MySvg />;
}