react如何使用图片
在 React 中使用图片的方法
使用本地图片
将图片文件放入项目的 public 或 src 目录中。如果放在 public 目录，可以直接通过路径引用：
<img src="/images/example.jpg" alt="Example" />如果放在 src 目录中，需要先导入图片：
import exampleImage from './images/example.jpg';
function MyComponent() {
return <img src={exampleImage} alt="Example" />;
}使用网络图片
直接使用图片的 URL：
<img src="https://example.com/image.jpg" alt="Example" />使用 CSS 背景图片
在组件样式文件中设置背景图片：
const divStyle = {
backgroundImage: 'url(/images/example.jpg)',
width: '100px',
height: '100px'
};
function MyComponent() {
return <div style={divStyle}></div>;
}或者使用 CSS 模块：
import styles from './MyComponent.module.css';
function MyComponent() {
return <div className={styles.imageBackground}></div>;
}对应的 CSS 文件：
.imageBackground {
background-image: url('./example.jpg');
width: 100px;
height: 100px;
}使用动态图片路径
当需要动态加载不同图片时，可以将图片放在 public 目录并使用模板字符串：
function MyComponent({ imageName }) {
return <img src={`/images/${imageName}.jpg`} alt="Dynamic" />;
}优化图片加载
考虑使用 loading="lazy" 属性实现懒加载：
<img src="/images/example.jpg" alt="Example" loading="lazy" />对于更高级的图片处理，可以集成第三方库如 react-image 或 next/image（在 Next.js 中）。
