当前位置：首页 > React

react如何添加图片

2026-03-30 20:11:58React

添加本地图片

在React项目中，将图片文件放在public或src目录下。使用import引入图片后通过img标签显示：

import logo from './logo.png';

function App() {
  return <img src={logo} alt="Logo" />;
}

添加网络图片

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

react如何添加图片

function App() {
  return (
    <img 
      src="https://example.com/image.jpg" 
      alt="Example" 
    />
  );
}

使用public目录图片

存放在public文件夹中的图片可以通过绝对路径访问：

function App() {
  return <img src="/images/photo.png" alt="Photo" />;
}

动态加载图片

结合require语法动态加载不同图片：

react如何添加图片

function ImageComponent({ imageName }) {
  const imagePath = require(`./assets/${imageName}.png`);
  return <img src={imagePath} alt="Dynamic" />;
}

样式化图片

通过CSS模块或内联样式控制图片显示：

import styles from './Image.module.css';

function StyledImage() {
  return (
    <img
      src="/image.jpg"
      alt="Styled"
      className={styles.rounded}
      style={{ width: 200 }}
    />
  );
}

使用背景图片

在组件中通过CSS设置背景图：

const divStyle = {
  backgroundImage: 'url(/background.jpg)',
  width: '100%',
  height: '300px'
};

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