当前位置：首页 > React

react如何显示图片

2026-02-26 12:16:54React

在React中显示图片的方法

React中显示图片可以通过多种方式实现，具体取决于图片的来源和存储位置。

使用本地图片

将图片文件放在项目的public或src目录中，通过相对路径引用：

import React from 'react';
import logo from './logo.png'; // 从src目录导入

function App() {
  return (
    <div>
      {/* 从src目录使用 */}
      <img src={logo} alt="Logo" />

      {/* 从public目录使用 */}
      <img src="/images/logo.png" alt="Logo" />
    </div>
  );
}

使用网络图片

直接使用图片的URL地址：

react如何显示图片

<img src="https://example.com/image.jpg" alt="Example" />

动态加载图片

当图片路径需要动态生成时：

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

使用CSS背景图片

通过style属性设置背景图片：

react如何显示图片

<div style={{ 
  backgroundImage: `url(${require('./background.jpg')})`,
  width: '100%',
  height: '200px'
}}></div>

优化图片加载

使用懒加载提高性能：

import { LazyLoadImage } from 'react-lazy-load-image-component';
import 'react-lazy-load-image-component/src/effects/blur.css';

<LazyLoadImage
  src="/image.jpg"
  alt="Image"
  effect="blur"
  width="100%"
/>

处理图片加载状态

添加加载中和错误处理：

function ImageWithStatus({ src, alt }) {
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(false);

  return (
    <div>
      {loading && <div>Loading...</div>}
      {error && <div>Error loading image</div>}
      <img
        src={src}
        alt={alt}
        onLoad={() => setLoading(false)}
        onError={() => setError(true)}
        style={{ display: loading || error ? 'none' : 'block' }}
      />
    </div>
  );
}

这些方法涵盖了React中显示图片的主要场景，可以根据具体需求选择合适的方式。