react如何显示图片

在React中显示图片的方法

使用本地图片

将图片文件放在项目目录中（如src/assets或public文件夹），通过import或直接引用路径加载。

从src导入：

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

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

从public引用：

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

使用在线图片

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

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

动态加载图片

结合状态管理动态切换图片：

function App() {
  const [imageUrl, setImageUrl] = useState('default.jpg');

  return (
    <div>
      <img src={imageUrl} alt="Dynamic" />
      <button onClick={() => setImageUrl('new-image.jpg')}>
        切换图片
      </button>
    </div>
  );
}

优化建议

• 添加alt属性提升可访问性
• 使用loading="lazy"实现懒加载
• 对本地图片使用Webpack等工具优化压缩

样式控制

通过CSS或行内样式调整图片显示：

<img 
  src="image.jpg" 
  style={{ width: '100px', borderRadius: '8px' }} 
  className="custom-image"
/>

对应CSS：

.custom-image {
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}