react如何插入图片

在React中插入图片的方法

使用import导入本地图片
将图片文件放入项目目录（如src/assets），通过import引入后作为src属性值：

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

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

直接使用public目录下的图片
放置在public文件夹中的文件可通过绝对路径访问，路径以/开头：

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

动态加载图片
结合模板字符串动态生成路径（需确保文件存在）：

function App({ imageName }) {
  return <img src={`/images/${imageName}.png`} alt="Dynamic" />;
}

通过require语法（非推荐）
适用于某些旧配置或非模块化环境：

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

注意事项

• 使用import时需配置好Webpack或Vite的图片处理规则。
• 动态路径需考虑打包后的文件结构，避免路径错误。
• 始终添加alt属性以符合可访问性标准。