当前位置：首页 > React

react如何画图片

2026-03-31 06:37:05React

使用 `<img>` 标签加载图片

在 React 中可以直接使用 HTML 的 <img> 标签加载图片，通过 src 属性指定图片路径。如果是本地图片，需要先导入：

import React from "react";
import logo from "./logo.png"; // 导入本地图片

function App() {
  return (
    <div>
      {/* 使用本地图片 */}
      <img src={logo} alt="Logo" />

      {/* 使用网络图片 */}
      <img src="https://example.com/image.jpg" alt="Example" />
    </div>
  );
}

通过 CSS 背景图显示图片

通过内联样式或 CSS 类设置背景图，适合需要动态控制图片的场景：

react如何画图片

const style = {
  backgroundImage: "url(https://example.com/image.jpg)",
  width: "200px",
  height: "200px",
  backgroundSize: "cover"
};

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

使用第三方库（如 `react-canvas`）

需要绘制复杂图形或动态图片时，可以使用专门的库如 react-canvas 或 react-konva：

react如何画图片

import { Canvas } from "react-canvas";

function App() {
  return (
    <Canvas
      draw={(ctx) => {
        const img = new Image();
        img.src = "https://example.com/image.jpg";
        img.onload = () => ctx.drawImage(img, 0, 0, 200, 200);
      }}
    />
  );
}

SVG 图片渲染

直接嵌入 SVG 代码或通过组件导入 SVG 文件（需配置 loader）：

function App() {
  return (
    <svg width="100" height="100">
      <image href="https://example.com/image.svg" width="100" height="100" />
    </svg>
  );
}

动态加载图片

通过状态管理动态切换图片路径：

import React, { useState } from "react";

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

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