react如何引用图片
在React中引用图片的方法
使用import导入图片
将图片文件放在项目目录中（如src/assets），通过import直接引入。这种方式会在构建时处理图片路径，适用于静态资源。
import logo from './assets/logo.png';
function App() {
return <img src={logo} alt="Logo" />;
}使用require动态加载
适用于需要条件渲染图片的场景，注意require路径需为静态字符串（Webpack要求）。
const imagePath = require('./assets/image.jpg');
function Component() {
return <img src={imagePath.default || imagePath} alt="Dynamic" />;
}直接使用public目录
放置在public文件夹中的文件可通过绝对路径访问，适合不改动的第三方资源（如CDN图片）。
<img src="/images/hero.jpg" alt="Public Image" />使用在线URL
直接引用网络图片地址，无需本地存储。
<img
src="https://example.com/pic.png"
alt="Online Image"
/>SVG组件导入
将SVG作为React组件使用（需配合@svgr/webpack等插件）。
import { ReactComponent as Icon } from './icon.svg';
function Button() {
return <Icon width="24px" />;
}注意事项
- 使用
import/require时，图片会被Webpack处理并生成哈希文件名 public目录中的文件不会被Webpack处理，需手动维护- 动态路径需通过字符串拼接实现，如：
require(\./assets/\${name}.jpg`)` - Next.js等框架支持更优化的图片组件（如
next/image）
