react如何渲染图片
在 React 中渲染图片的方法
方法一：使用本地图片
将图片文件放在项目目录中（如 src/assets），通过 import 引入后渲染：
import React from 'react';
import localImage from './assets/image.jpg';
function App() {
return <img src={localImage} alt="Local Image" />;
}方法二：使用在线图片
直接使用图片的 URL 作为 src 属性：
function App() {
return (
<img
src="https://example.com/image.jpg"
alt="Online Image"
/>
);
}方法三：动态渲染图片
根据条件或状态动态切换图片源：
function App() {
const [imageUrl, setImageUrl] = useState('default.jpg');
return (
<img
src={imageUrl}
alt="Dynamic Image"
onError={() => setImageUrl('fallback.jpg')}
/>
);
}方法四：通过 CSS 背景图渲染
使用内联样式或 CSS 类设置背景图：
// 内联样式
<div style={{ backgroundImage: `url(${imageUrl})` }}></div>
// CSS 类
import './styles.css';
<div className="image-bg"></div>注意事项
- 确保图片路径正确，本地图片需通过打包工具处理（如 Webpack）。
- 始终添加
alt属性以提升可访问性。 - 大图建议使用懒加载（如
loading="lazy"）。
