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 中）。