react中如何写图片路径

在React中正确编写图片路径需要根据图片存放位置和项目配置选择合适的方式。以下是几种常见方法：

使用相对路径或绝对路径

将图片放在public文件夹下时，可以直接通过相对路径或绝对路径引用。例如图片位于public/images/logo.png：

<img src="/images/logo.png" alt="Logo" />

使用import导入

将图片放在src文件夹中时，推荐使用ES6的import语法。这种方式会被Webpack处理：

import logo from './assets/logo.png';

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

使用require语法

在动态加载或条件渲染场景下，可以使用require语法：

<img src={require('./assets/logo.png').default} alt="Logo" />

CSS背景图片处理

在CSS文件中引用图片时，路径相对于CSS文件位置：

.header {
  background-image: url('../assets/bg.jpg');
}

环境变量处理

在需要根据不同环境切换路径时，可以使用环境变量：

<img src={`${process.env.PUBLIC_URL}/images/logo.png`} alt="Logo" />

动态路径拼接

需要动态生成路径时，建议使用模板字符串：

const imageName = 'banner';
<img src={`/images/${imageName}.jpg`} alt="Banner" />

注意事项：

• 使用create-react-app创建的项目默认配置了Webpack图片加载器
• 生产构建时Webpack会优化图片路径，开发环境需确保路径正确
• SVG文件可以直接作为React组件导入使用