react如何插入图片
在React中插入图片的方法
使用import语句引入图片文件，适用于现代前端构建工具（如Webpack、Vite）。图片会被处理为模块，并生成优化后的路径。
import logo from './logo.png';
function App() {
return <img src={logo} alt="Logo" />;
}使用require动态引入
适合需要条件加载图片的场景，注意这种方式在Create React App 2.0+可能需额外配置。
function App() {
const imagePath = require('./dynamic-image.jpg');
return <img src={imagePath} alt="Dynamic Content" />;
}直接引用public目录文件
将图片放在public文件夹，通过绝对路径引用。注意这种方式不会经过构建优化。
function App() {
return <img src="/images/logo.png" alt="Public Folder Image" />;
}使用在线图片URL
直接使用网络图片地址，适合引用CDN资源或外部图片。
function App() {
return (
<img
src="https://example.com/path/to/image.jpg"
alt="Online Image"
/>
);
}通过CSS背景图插入
使用内联样式或CSS模块设置背景图，适合需要背景图片的场景。
// 方法1：内联样式
function Banner() {
const style = {
backgroundImage: `url(${require('./banner.jpg')})`
};
return <div style={style} />;
}
// 方法2：CSS模块
import styles from './Banner.module.css';
function Banner() {
return <div className={styles.banner} />;
}SVG组件引入
将SVG作为React组件导入，可以获得矢量图的操控能力。
import { ReactComponent as Logo } from './logo.svg';
function App() {
return <Logo />;
}注意事项
- 使用相对路径时确保文件位置正确
- 始终添加
alt属性以提高可访问性 - 生产环境下建议对图片进行压缩优化
- 动态加载大量图片时考虑懒加载技术
