当前位置：首页 > React

react如何渲染图片

2026-01-15 09:37:48React

在React中渲染图片的方法

使用<img>标签直接引入本地图片
将图片文件放入项目目录（如src/assets），通过相对路径引入。需注意Webpack可能需要配置file-loader或url-loader处理图片资源。

import React from 'react';
import logo from './assets/logo.png'; // 导入图片

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

动态渲染远程图片
直接使用图片URL作为src属性值，适用于通过API获取的图片链接。

react如何渲染图片

function App() {
  const imageUrl = "https://example.com/path/to/image.jpg";
  return <img src={imageUrl} alt="Remote Image" />;
}

使用require动态加载图片（适用于非模块化环境）
在需要动态切换本地图片时，可通过require语法实现。

react如何渲染图片

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

优化图片加载的注意事项

添加loading="lazy"属性实现懒加载。
使用width和height避免布局偏移。
通过CSS控制图片样式（如object-fit）。

<img 
  src={imageUrl} 
  alt="Optimized Image" 
  loading="lazy" 
  width={300} 
  height={200} 
  style={{ objectFit: 'cover' }}
/>

处理图片加载状态
通过onLoad和onError事件管理加载状态，显示占位符或错误提示。

function ImageWithStatus({ src }) {
  const [isLoading, setIsLoading] = React.useState(true);
  const [hasError, setHasError] = React.useState(false);

  return (
    <div>
      {isLoading && <div>Loading...</div>}
      {hasError && <div>Failed to load</div>}
      <img
        src={src}
        onLoad={() => setIsLoading(false)}
        onError={() => setHasError(true)}
        style={{ display: isLoading || hasError ? 'none' : 'block' }}
      />
    </div>
  );
}