react如何插入图片

插入本地图片

将图片文件放入项目目录中，通常放在src/assets或public文件夹。通过import引入图片后，直接赋值给<img>标签的src属性。

import logo from './assets/logo.png';

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

插入网络图片

直接使用图片的URL地址作为src属性值，无需import。

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

使用public目录图片

放在public文件夹的图片可以通过绝对路径访问。路径以/开头，对应public目录根。

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

动态加载图片

使用模板字符串或变量动态拼接图片路径。

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

样式调整

通过style属性或CSS类控制图片大小和布局。

<img 
  src={logo} 
  alt="Styled Image" 
  style={{ width: '100px', height: 'auto' }}
  className="custom-image"
/>

注意事项

• 使用alt属性提高可访问性
• 本地图片建议使用import方式，避免路径问题
• 大尺寸图片需优化压缩，提升加载性能