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"
/>
