当前位置：首页 > React

react如何渲染图片

2026-02-11 18:29:23React

渲染本地图片

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

使用import方式：

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

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

使用public目录方式：

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

渲染远程图片

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

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

动态渲染图片

通过变量或状态动态设置图片路径：

function App() {
  const [imageUrl, setImageUrl] = useState('');

  useEffect(() => {
    fetchImageUrl().then(url => setImageUrl(url));
  }, []);

  return <img src={imageUrl} alt="Dynamic Image" />;
}

使用require语法

在Webpack环境中可以使用require：

function App() {
  return <img src={require('./assets/image.png')} alt="Required Image" />;
}

图片优化处理

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

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

添加width和height属性防止布局偏移：

<img
  src="image.jpg"
  alt="Dimension Set"
  width={500}
  height={300}
/>

处理加载和错误状态

添加onLoad和onError事件处理：

react如何渲染图片

function ImageWithStatus() {
  const [status, setStatus] = useState('loading');

  return (
    <div>
      <img
        src="image.jpg"
        alt="With Status"
        onLoad={() => setStatus('loaded')}
        onError={() => setStatus('error')}
      />
      {status === 'loading' && <p>Loading...</p>}
      {status === 'error' && <p>Failed to load image</p>}
    </div>
  );
}