react如何引入图片

引入本地图片

在React中引入本地图片可以通过import语句或require语法实现。图片文件需放在项目目录下（如src/assets）。

使用import语句：

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

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

使用require语法（动态路径需在require内写完整路径）：

function App() {
  return <img src={require('./assets/logo.png')} alt="Logo" />;
}

引入网络图片

直接使用图片URL作为src值：

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

通过CSS引入图片

在CSS文件中设置背景图时，路径需相对于CSS文件：

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

动态导入图片

使用模板字符串或变量传递动态路径时，需确保Webpack能正确解析路径：

const imageName = 'dynamic-image';
function App() {
  return <img src={require(`./assets/${imageName}.png`)} alt="Dynamic" />;
}

注意事项

• 使用Create React App或Vite时，默认配置已支持图片导入。
• 自定义Webpack配置需确保file-loader或url-loader正确处理图片。
• SVG文件可作为组件导入（需配置@svgr/webpack）：

  import { ReactComponent as Icon } from './icon.svg';
  function App() {
    return <Icon />;
  }