react如何引入照片
在 React 中引入照片的方法
使用 import 直接引入
将图片文件放在项目目录中（如 src/assets），通过 import 引入后作为变量使用：
import logo from './assets/logo.png';
function App() {
return <img src={logo} alt="Logo" />;
}通过 require 动态引入（适用于类组件或需要条件渲染的情况）
const imagePath = require('./assets/image.jpg').default;
function Component() {
return <img src={imagePath} alt="Dynamic Image" />;
}使用公共文件夹（public）中的图片
将图片放入 public 文件夹，直接通过绝对路径引用：
<img src="/images/photo.jpg" alt="Public Folder Image" />使用在线图片 URL
直接使用完整的网络地址：
<img
src="https://example.com/path/to/image.jpg"
alt="Online Image"
/>CSS 背景图片引入
在 CSS 模块或内联样式中使用：
// In CSS module
.hero {
background-image: url('./assets/hero-bg.jpg');
}
// Inline style
<div style={{
backgroundImage: `url(${require('./bg.jpg').default})`
}} />注意事项
- 使用
import或require时，Webpack 会处理图片资源并优化打包 - 公共文件夹中的文件不会被 Webpack 处理，适合不变的静态资源
- 对于动态路径，建议将图片放在
src目录并通过模块系统引入 - 生产环境下建议对图片进行压缩优化
