react如何展示图片
在React中展示图片的方法
使用img标签直接引入本地图片
将图片文件放入项目目录（如src/assets），通过相对路径引用。注意需要配合Webpack等构建工具处理资源路径。
import React from 'react';
function ImageComponent() {
return (
<img
src={require('./assets/example.jpg')}
alt="示例图片"
/>
);
}通过import导入图片 现代React项目通常支持直接import图片作为模块，这种方式会返回处理后的最终路径。
import React from 'react';
import exampleImg from './assets/example.jpg';
function ImageComponent() {
return <img src={exampleImg} alt="示例图片" />;
}动态加载远程图片
直接使用图片URL作为src属性值，适用于网络图片或动态获取的图片路径。
function RemoteImage() {
const imageUrl = 'https://example.com/path/to/image.jpg';
return <img src={imageUrl} alt="远程图片" />;
}使用背景图片方式
通过CSS的background-image属性展示图片，适用于需要特殊样式控制的场景。
const divStyle = {
backgroundImage: `url(${require('./assets/bg.jpg')})`,
width: '500px',
height: '300px',
backgroundSize: 'cover'
};
function BgImageComponent() {
return <div style={divStyle} />;
}优化图片加载的注意事项
- 始终添加
alt属性提升可访问性 - 对本地图片建议使用Webpack的
file-loader或url-loader - 大图考虑使用懒加载技术（如
react-lazyload） - 响应式图片可结合
srcSet属性实现
处理常见问题方案
图片路径错误 检查构建工具配置确保正确处理静态资源。Create React App项目默认已配置好资源处理。
图片加载失败
添加onError回调处理异常情况：
function SafeImage({ src }) {
const [imgSrc, setImgSrc] = useState(src);
const handleError = () => {
setImgSrc('fallback.jpg');
};
return <img src={imgSrc} onError={handleError} alt="安全图片" />;
}性能优化
考虑使用现代图片格式（WebP），或通过<picture>元素提供多种格式选择：
<picture>
<source srcSet="image.webp" type="image/webp" />
<img src="image.jpg" alt="优化图片" />
</picture>
