antd中Steps步骤条设置 items的icon属性为本地的png类型图片

可以使用`require`函数将本地的png图片转换成base64编码，然后将base64编码作为`icon`属性的值传入即可。

示例代码：

import { Steps } from 'antd';

const { Step } = Steps;

const items = [
  {
    title: 'Step 1',
    icon: <img src={require('./step1.png')} alt="step1" />,
  },
  {
    title: 'Step 2',
    icon: <img src={require('./step2.png')} alt="step2" />,
  },
  {
    title: 'Step 3',
    icon: <img src={require('./step3.png')} alt="step3" />,
  },
];

function App() {
  return (
    <Steps current={1}>
      {items.map(item => (
        <Step
          key={item.title}
          title={item.title}
          icon={item.icon}
        />
      ))}
    </Steps>
  );
}

相关问题

antd中Steps步骤条设置文字标识在图标的下面

可以通过设置`labelPlacement`属性为`bottom`来实现文字标识在图标的下面，示例代码如下：

import { Steps } from 'antd';

const { Step } = Steps;

function App() {
  return (
    <Steps labelPlacement="bottom">
      <Step title="Step 1" description="This is a description." />
      <Step title="Step 2" description="This is a description." />
      <Step title="Step 3" description="This is a description." />
    </Steps>
  );
}

export default App;

antd steps步骤条下一步返回到顶部

您可以使用antd Steps组件的`onChange`属性来监听步骤变化，然后在下一步被点击时，使用JavaScript的`window.scrollTo()`方法将页面滚动到顶部。

以下是一个示例代码：

import React, { useState } from 'react';
import { Steps, Button } from 'antd';

const { Step } = Steps;

const MySteps = () => {
  const [current, setCurrent] = useState(0);

  const handleNext = () => {
    setCurrent(current + 1);
    window.scrollTo(0, 0); // 滚动到顶部
  }

  return (
    <div>
      <Steps current={current} onChange={setCurrent}>
        <Step title="第一步" />
        <Step title="第二步" />
        <Step title="第三步" />
      </Steps>
      <div style={{ marginTop: '16px' }}>
        { current < 2 && <Button type="primary" onClick={handleNext}>下一步</Button> }
        { current === 2 && <Button type="primary">完成</Button> }
      </div>
    </div>
  );
}

export default MySteps;

在上面的代码中，我们使用`window.scrollTo(0, 0)`方法将页面滚动到顶部。注意，我们仅在下一步按钮被点击时执行这个方法，而不是每次步骤变化时都执行。