react如何显示图片
在React中显示图片的方法
使用本地图片
将图片文件放入项目目录（如src/assets），通过import引入后作为src属性使用：
import logo from './assets/logo.png';
function App() {
return <img src={logo} alt="Company Logo" />;
}使用在线图片
直接使用图片URL作为src属性：
function App() {
return (
<img
src="https://example.com/image.jpg"
alt="Online Image"
/>
);
}动态加载图片 结合状态管理动态切换图片：
function ImageSwitcher() {
const [currentImage, setImage] = useState(image1);
return (
<div>
<img src={currentImage} alt="Dynamic Content" />
<button onClick={() => setImage(image2)}>切换图片</button>
</div>
);
}优化建议
- 始终添加
alt属性提升可访问性 - 对本地图片使用Webpack等构建工具优化
- 考虑使用
loading="lazy"实现懒加载 - 大图建议使用
<picture>标签配合响应式方案
样式控制示例
通过CSS模块或行内样式调整图片表现：
// CSS模块
import styles from './Image.module.css';
<img className={styles.rounded} ... />
// 行内样式
<img style={{ borderRadius: '8px' }} ... />第三方组件方案
使用如react-image等库可扩展功能：
import { Img } from 'react-image';
<Img
src={["image.jpg", "fallback.jpg"]}
loader={<Spinner />}
unloader={<ErrorIcon />}
/>
