React中的img src

在React中使用<img>标签显示图片需要通过src属性来指定图片路径，这与普通的HTML标签使用方式相同。但是由于React是一个组件化的框架，因此图片路径的引用方式需要有些不同。

直接引用图片路径

React中直接使用相对路径引用图片的方式与普通HTML标签相同，例如：

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

但是在React项目中，为了方便管理和维护，通常会将所有的静态资源（例如图片、样式文件等）放在某个统一的目录下，这个目录通常被称为public目录。因此，如果要引用public/images/example.png，可以这样写：

<img src={process.env.PUBLIC_URL + '/images/example.png'} alt="Example Image" />

其中，process.env.PUBLIC_URL是在React项目中预定义好的全局变量，它可以返回public目录的绝对路径。

引用require导入的图片

在React项目中，通常将图片作为模块引入，然后通过模块引入的方式来使用图片。例如，假设有一个example.png图片，可以这样在组件中导入并使用它：

import exampleImage from './example.png';

function ExampleComponent() {
  return <img src={exampleImage} alt="Example Image" />;
}

这里的exampleImage是通过require()函数返回的一个模块对象，可以直接传递给<img>组件的src属性。

图片优化

在使用React中的图片时，还需要注意一些图片优化的问题。例如，图片大小要尽可能小，以减少页面加载时间；同时，对于较大的图片，可以使用图片懒加载等技术。除此之外，还可以使用工具对图片进行压缩和优化，以提高页面性能和用户体验。

总结

在React中使用<img>标签显示图片需要通过src属性来指定图片路径，可以直接引用图片路径或者通过模块引入的方式来使用图片。为了提高页面性能和用户体验，还需要对图片进行优化处理。