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）