react如何引入照片

在React中引入照片的方法

使用import直接引入本地图片
将图片文件放在项目目录（如src/assets），通过import导入后作为变量使用：

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

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

通过require动态引入（适用于旧版或特定场景）
部分场景可能需要动态路径时使用，但需注意CRA默认不支持：

const imagePath = require(`./images/${fileName}.jpg`);

<img src={imagePath} alt="Dynamic" />

使用public目录存放静态资源
将图片放入public文件夹，通过绝对路径直接引用：

<img src="/images/photo.jpg" alt="Public Photo" />

CSS背景图引入
在CSS文件中通过相对路径或URL设置背景：

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

注意事项

• 使用import时，图片会被Webpack处理并生成哈希文件名，避免缓存问题。
• public目录中的文件不会被Webpack处理，适合大量静态资源或CDN引用。
• 动态路径需配合后端或模块系统（如require.context）实现。