react如何引入照片

引入本地图片

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

方法1：使用import

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

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

方法2：使用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="Remote Image"
    />
  );
}

动态导入图片

通过模板字符串动态构建路径时，需确保文件已预加载：

const imageName = 'banner';
function App() {
  return (
    <img 
      src={require(`./assets/${imageName}.jpg`)} 
      alt="Dynamic Image"
    />
  );
}

使用public目录图片

放置在public文件夹中的图片可通过绝对路径访问：

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

SVG组件导入

通过@svgr/webpack可将SVG作为React组件使用：

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

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

注意事项

• 使用require时需确保项目配置支持动态路径（CRA默认不支持）
• 生产环境需检查图片路径是否正确打包
• 建议对图片进行懒加载优化：

  <img src={logo} loading="lazy" alt="Lazy Loaded" />