react 中如何设置图片

使用 img 标签直接引入图片

在 React 中可以直接使用 HTML 的 img 标签，通过 src 属性指定图片路径。路径可以是本地文件或远程 URL。

function ImageComponent() {
  return (
    <img src="/images/example.jpg" alt="示例图片" />
  );
}

如果是远程图片，直接使用完整 URL：

<img src="https://example.com/image.png" alt="远程图片" />

通过 require 动态引入图片

在 Webpack 环境下，可以使用 require 动态导入本地图片。适用于需要动态路径或模块化管理的场景。

function ImageComponent() {
  const imagePath = require("../assets/image.png");
  return <img src={imagePath} alt="动态加载图片" />;
}

使用 import 导入图片

通过 ES6 的 import 语法直接引入图片文件，适合静态资源管理。

import logo from "./logo.png";

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

设置样式和内联样式

通过 className 或内联样式调整图片大小、边距等属性。

// 使用 className
<img src="image.png" alt="样式示例" className="custom-image" />

// 内联样式
<img 
  src="image.png" 
  alt="内联样式" 
  style={{ width: "100px", height: "auto" }} 
/>

处理动态路径与条件渲染

结合状态或 props 动态切换图片路径，或根据条件渲染不同图片。

function DynamicImage({ isActive }) {
  const activeImage = "/images/active.png";
  const defaultImage = "/images/default.png";

  return (
    <img 
      src={isActive ? activeImage : defaultImage} 
      alt="动态图片" 
    />
  );
}

优化性能与可访问性

• 添加 alt 属性提升可访问性。
• 使用 loading="lazy" 实现懒加载。
• 对远程图片考虑 CDN 或压缩优化。

<img 
  src="large-image.jpg" 
  alt="优化示例" 
  loading="lazy" 
  width="800" 
  height="600" 
/>