react中如何展示img

在React中展示图片

React中展示图片可以通过<img>标签或结合require/import语法实现。以下是几种常见方法：

使用public目录中的图片
将图片放置在public目录下，直接通过路径引用：

<img src="/images/example.jpg" alt="示例图片" />

通过import引入图片
使用ES6的import语法导入图片（需配置Webpack或Vite等构建工具支持）：

import exampleImg from './assets/example.jpg';

function Component() {
  return <img src={exampleImg} alt="示例" />;
}

动态路径处理
若需动态加载图片，建议将图片文件放在src目录并通过require或模板字符串处理：

const imageName = 'example';
<img src={require(`./assets/${imageName}.jpg`)} alt="动态图片" />

注意事项

• 使用require时需确保构建工具支持动态路径。
• 始终添加alt属性以符合可访问性标准。
• 性能优化可考虑使用loading="lazy"实现懒加载。