react如何添加图片
在 React 中添加图片的方法
方法1：使用 import 导入本地图片
在 React 组件中，可以通过 import 直接引入本地图片文件，这种方式适用于项目内的静态资源。
import React from 'react';
import myImage from './path/to/image.jpg'; // 导入图片
function MyComponent() {
return <img src={myImage} alt="示例图片" />;
}方法2：通过 require 动态引入图片
对于需要动态加载的图片，可以使用 require 语法（需确保构建工具支持）。
function MyComponent() {
const imagePath = require('./path/to/image.png');
return <img src={imagePath} alt="动态图片" />;
}方法3：直接使用公共路径（CDN 或 /public 目录）
将图片放入 public 目录后，可直接通过相对路径引用。适用于无需构建处理的资源。
function MyComponent() {
return <img src="/images/logo.png" alt="公共路径图片" />;
}方法4：使用内联 Base64 编码
对小图片可转换为 Base64 格式直接嵌入，减少 HTTP 请求。
function MyComponent() {
const base64Image = 'data:image/png;base64,iVBORw0KGgo...';
return <img src={base64Image} alt="Base64图片" />;
}注意事项
- 使用
import或require时，确保文件路径正确。 - 公共路径方式需注意部署后的目录结构。
- 动态加载图片时，建议添加错误处理逻辑。
- 始终为
img标签添加alt属性以满足可访问性要求。
以上方法可根据实际场景选择，通常推荐优先使用 import 方式管理本地资源。
