react如何引图片

在React中引用图片的方法

使用import直接引入

通过ES6的import语法将图片作为模块引入，适用于静态资源管理。

import logo from './logo.png'; // 路径根据实际位置调整

function App() {
  return <img src={logo} alt="Logo" />;
}

使用require动态引入

适用于需要条件加载或动态路径的场景。

function App() {
  const imagePath = require('./dynamic-image.jpg');
  return <img src={imagePath} alt="Dynamic Image" />;
}

通过public目录直接引用

将图片放入public文件夹，通过绝对路径访问。适合无需打包处理的资源。

function App() {
  return <img src="/images/example.jpg" alt="Public Image" />;
}

使用在线图片URL

直接引用网络图片地址。

function App() {
  return <img src="https://example.com/image.jpg" alt="Online Image" />;
}

注意事项

• 性能优化：对于本地图片，建议使用import或require以利用Webpack的打包优化（如压缩、缓存）。
• 路径问题：使用相对路径时需确保路径层级正确，建议使用@/别名（若配置了Webpack别名）。
• 动态路径：若路径需动态生成，require可能更灵活，但需注意路径拼接的准确性。

SVG组件化引用

若使用SVG，可将其转换为React组件以获得更好的控制。

import { ReactComponent as Logo } from './logo.svg';

function App() {
  return <Logo />;
}