当前位置：首页 > React

react如何渲染图片

2026-02-26 04:36:43React

渲染本地图片

将图片文件放入项目的public或src目录中，通过import或直接引用路径使用。

使用import方式（推荐）：

import React from 'react';
import logo from './logo.png'; // 图片路径

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

使用public目录引用：

react如何渲染图片

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

渲染网络图片

直接使用图片URL作为src属性：

function App() {
  return (
    <img 
      src="https://example.com/image.jpg" 
      alt="Example" 
    />
  );
}

动态渲染图片

根据条件或状态动态切换图片：

react如何渲染图片

function App() {
  const [imageUrl, setImageUrl] = React.useState('default.jpg');

  return (
    <div>
      <img src={imageUrl} alt="Dynamic" />
      <button onClick={() => setImageUrl('new-image.jpg')}>
        Change Image
      </button>
    </div>
  );
}

优化图片加载

使用loading="lazy"实现懒加载：

<img 
  src="large-image.jpg" 
  alt="Large" 
  loading="lazy" 
/>

添加备用srcSet和sizes属性：

<img
  src="image-320w.jpg"
  srcSet="image-480w.jpg 480w, image-800w.jpg 800w"
  sizes="(max-width: 600px) 480px, 800px"
  alt="Responsive"
/>

处理加载错误

添加onError回调处理加载失败：

function App() {
  const handleError = (e) => {
    e.target.src = 'fallback.jpg';
  };

  return (
    <img 
      src="possibly-broken.jpg" 
      alt="Content" 
      onError={handleError}
    />
  );
}