en-US

Set the display content when loading a large image through dLoading.

zh-CN

通过 dLoading 设置加载大图时的展示内容。

import { useState } from 'react';

import { LoadingOutlined } from '@react-devui/icons';
import { DImage, DButton } from '@react-devui/ui';

export default function Demo() {
  const [random, setRandom] = useState(Date.now());

  return (
    <>
      <DButton
        onClick={() => {
          setRandom(Date.now());
        }}
      >
        Reload
      </DButton>
      <br />
      <br />
      <DImage
        style={{ height: 100 }}
        dLoading={
          <div className="loading">
            <LoadingOutlined dSize={20} dSpin />
          </div>
        }
        dImgProps={{ src: `https://fakeimg.pl/250x100?${random}`, alt: 'demo' }}
      ></DImage>
    </>
  );
}

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 250px;
  height: 100px;
  border: 1px solid var(--rd-color-border);
}