react如何渲染图片

在 React 中渲染图片的方法

方法一：使用本地图片
将图片文件放在项目目录中（如 src/assets），通过 import 引入后渲染：

import React from 'react';
import localImage from './assets/image.jpg';

function App() {
  return <img src={localImage} alt="Local Image" />;
}

方法二：使用在线图片
直接使用图片的 URL 作为 src 属性：

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

方法三：动态渲染图片
根据条件或状态动态切换图片源：

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

  return (
    <img 
      src={imageUrl} 
      alt="Dynamic Image" 
      onError={() => setImageUrl('fallback.jpg')}
    />
  );
}

方法四：通过 CSS 背景图渲染
使用内联样式或 CSS 类设置背景图：

// 内联样式
<div style={{ backgroundImage: `url(${imageUrl})` }}></div>

// CSS 类
import './styles.css';
<div className="image-bg"></div>

注意事项

• 确保图片路径正确，本地图片需通过打包工具处理（如 Webpack）。
• 始终添加 alt 属性以提升可访问性。
• 大图建议使用懒加载（如 loading="lazy"）。