react 中 如何引入图片
在 React 中引入图片的方法
使用 import 直接引入
通过 import 语句将图片作为模块引入，适用于静态资源管理。这种方式会在构建时处理图片路径，避免运行时路径错误。
import logo from './logo.png';
function App() {
return <img src={logo} alt="Logo" />;
}使用 require 动态引入
适用于需要动态加载图片的场景，例如根据条件选择不同图片。注意：现代 React 项目通常更推荐使用 import。
function App() {
const imagePath = require('./dynamic-image.png');
return <img src={imagePath} alt="Dynamic Image" />;
}直接使用公共路径
如果图片位于 public 文件夹中，可以直接通过相对路径引用。适用于无需构建处理的静态资源。
function App() {
return <img src="/images/logo.png" alt="Public Folder Image" />;
}使用在线图片 URL
直接使用网络图片的 URL，适用于引用外部资源。
function App() {
return (
<img
src="https://example.com/image.jpg"
alt="Online Image"
/>
);
}通过 CSS 引入背景图
在 CSS 文件中设置背景图片时，需确保路径相对于 CSS 文件或使用绝对路径。
/* styles.css */
.banner {
background-image: url('./banner.jpg');
}import './styles.css';
function App() {
return <div className="banner"></div>;
}使用 require.context 批量引入
适用于需要动态加载多个图片的场景，例如图片库。
const images = require.context('./assets', true);
const imageList = images.keys().map(images);
function Gallery() {
return (
<div>
{imageList.map((img, index) => (
<img key={index} src={img} alt={`Image ${index}`} />
))}
</div>
);
}注意事项
- 路径问题：确保图片路径相对于当前文件或
public文件夹正确。 - 性能优化：大图片建议使用懒加载或压缩工具处理。
- 动态路径：使用模板字符串或状态管理动态路径时，需确保路径有效性。
以上方法覆盖了 React 中常见的图片引入场景，可根据项目需求选择合适的方式。
