react如何使用图片

在React中使用图片的方法

使用本地图片 将图片文件放入项目的public或src目录中。若放在public文件夹，可以直接通过路径引用：

<img src="/images/example.jpg" alt="Example" />

若放在src目录中，需要先导入：

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

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

使用网络图片 直接使用图片URL作为src属性：

<img src="https://example.com/image.jpg" alt="Network Image" />

动态加载图片 当图片路径需要动态生成时，可以使用模板字符串或条件渲染：

const imageName = 'dynamic-image.jpg';
<img src={`/images/${imageName}`} alt="Dynamic Image" />

使用CSS背景图片 通过import导入图片后，将其作为背景：

import bgImage from './assets/background.jpg';

const divStyle = {
  backgroundImage: `url(${bgImage})`,
  width: '100%',
  height: '300px'
};

function Component() {
  return <div style={divStyle}></div>;
}

优化图片加载 对于大量或大尺寸图片，建议使用loading="lazy"属性延迟加载：

<img src="/large-image.jpg" alt="Large Image" loading="lazy" />

使用第三方库 对于更复杂的图片处理（如懒加载、响应式图片），可以考虑使用react-lazy-load-image-component或react-image等库。