react 中如何设置图片

在 React 中设置图片

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

import React from 'react';
import localImage from './assets/image.jpg'; // 从 src 目录导入

function App() {
  return (
    <div>
      {/* 通过 import 使用 */}
      <img src={localImage} alt="Local Image" />

      {/* 直接引用 public 目录下的图片 */}
      <img src="/images/image.jpg" alt="Public Image" />
    </div>
  );
}

使用网络图片
直接使用图片的 URL 作为 src 属性值。

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

动态加载图片
通过变量或状态动态切换图片路径。

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

return (
  <img 
    src={imageUrl} 
    alt="Dynamic Image" 
    onError={() => setImageUrl('fallback.jpg')} // 加载失败时回退
  />
);

优化图片加载
使用 loading="lazy" 实现懒加载，或通过 CSS 控制占位符。

<img
  src="large-image.jpg"
  alt="Lazy Loaded"
  loading="lazy"
  style={{ backgroundColor: '#eee' }} // 占位背景色
/>

注意事项

• 始终为 img 标签添加 alt 属性以提高可访问性。
• 使用 require 动态导入时需确保路径正确（适用于非模块化环境）。