react如何添加图片

在React中添加图片的方法

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

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

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

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

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

动态加载图片
需要根据变量动态切换图片时，使用require或模板字符串（需配置Webpack）：

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

使用在线图片URL
直接使用完整的图片URL地址：

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

注意事项

• 始终添加alt属性以提高可访问性。
• 本地图片建议使用import方式，Webpack会处理优化和路径问题。
• 动态路径需确保文件存在，否则可能引发构建错误。