当前位置：首页 > React

react如何使用图片

2026-03-31 05:08:31React

在React中使用图片的方法

React中可以通过多种方式使用图片，以下是常见的几种方法：

使用import导入本地图片

将图片文件放在项目目录中（通常放在src/assets或public文件夹），然后通过import语句导入：

import logo from './assets/logo.png';

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

这种方法会在构建时处理图片，Webpack等打包工具会优化图片。

直接引用public目录中的图片

放在public目录中的图片可以直接通过路径引用：

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

这种方式适合不需要构建处理的静态资源，路径相对于public目录。

使用require动态导入

在某些场景下可能需要动态导入图片：

react如何使用图片

function ImageComponent({ imageName }) {
  const imagePath = require(`./images/${imageName}.png`);
  return <img src={imagePath} alt="Dynamic" />;
}

注意这种方法在现代React项目中可能不再推荐，因为ES模块已成为标准。

使用CSS背景图片

通过CSS设置背景图片：

import './styles.css';

function DivWithBg() {
  return <div className="bg-image"></div>;
}

对应的CSS文件：

react如何使用图片

.bg-image {
  background-image: url('./assets/bg.jpg');
  width: 100%;
  height: 300px;
}

使用base64编码的内联图片

对于小图片，可以直接使用base64编码：

function InlineImage() {
  return <img src="data:image/png;base64,iVBORw0KGgo..." alt="Inline" />;
}

使用第三方图片服务

可以直接使用URL引用外部图片：

function ExternalImage() {
  return (
    <img 
      src="https://example.com/image.jpg" 
      alt="External"
      onError={(e) => { e.target.src = '/fallback.jpg'; }}
    />
  );
}

优化图片加载

考虑使用懒加载和占位符：

import { useState } from 'react';

function LazyImage({ src, alt }) {
  const [loaded, setLoaded] = useState(false);

  return (
    <>
      {!loaded && <div className="placeholder">Loading...</div>}
      <img
        src={src}
        alt={alt}
        onLoad={() => setLoaded(true)}
        style={{ display: loaded ? 'block' : 'none' }}
      />
    </>
  );
}

使用下一代图片格式

考虑使用WebP等现代图片格式：

function ModernImage() {
  return (
    <picture>
      <source srcSet="/image.webp" type="image/webp" />
      <source srcSet="/image.jpg" type="image/jpeg" /> 
      <img src="/image.jpg" alt="Modern" />
    </picture>
  );
}