react如何渲染图片
在React中渲染图片的方法
使用<img>标签直接引入本地图片
将图片文件放入项目目录（如src/assets），通过相对路径引入。需注意Webpack可能需要配置file-loader或url-loader处理图片资源。
import React from 'react';
import logo from './assets/logo.png'; // 导入图片
function App() {
return <img src={logo} alt="Logo" />;
}动态渲染远程图片
直接使用图片URL作为src属性值，适用于通过API获取的图片链接。
function App() {
const imageUrl = "https://example.com/path/to/image.jpg";
return <img src={imageUrl} alt="Remote Image" />;
}使用require动态加载图片（适用于非模块化环境）
在需要动态切换本地图片时，可通过require语法实现。
function App({ imageName }) {
const imagePath = require(`./assets/${imageName}.png`);
return <img src={imagePath} alt="Dynamic Image" />;
}优化图片加载的注意事项
- 添加
loading="lazy"属性实现懒加载。 - 使用
width和height避免布局偏移。 - 通过CSS控制图片样式（如
object-fit）。
<img
src={imageUrl}
alt="Optimized Image"
loading="lazy"
width={300}
height={200}
style={{ objectFit: 'cover' }}
/>处理图片加载状态
通过onLoad和onError事件管理加载状态，显示占位符或错误提示。
function ImageWithStatus({ src }) {
const [isLoading, setIsLoading] = React.useState(true);
const [hasError, setHasError] = React.useState(false);
return (
<div>
{isLoading && <div>Loading...</div>}
{hasError && <div>Failed to load</div>}
<img
src={src}
onLoad={() => setIsLoading(false)}
onError={() => setHasError(true)}
style={{ display: isLoading || hasError ? 'none' : 'block' }}
/>
</div>
);
}
