react#ImgHTMLAttributes TypeScript Examples

function LazyImageComponent(
  {
    imgSrc,
    imgAlt,
    eager,
    className,
    ratio,
    background,
    fallbackSrc,
    children,
    absolute = false,
    fit = 'cover',
    ...props
  }: LazyImageProps,
  ref?: Ref<HTMLImageElement>,
): ReactElement {
  // const { asyncImageSupport } = useContext(ProgressiveEnhancementContext);
  const baseImageClass = `absolute block inset-0 w-full h-full m-auto ${
    fit === 'cover' ? 'object-cover' : 'object-contain'
  }`;
  let imageProps: ImgHTMLAttributes<HTMLImageElement> & {
    'data-src'?: string;
  };
  if (eager) {
    imageProps = { src: imgSrc, className: baseImageClass };
  } else if (asyncImageSupport) {
    imageProps = { src: imgSrc, loading: 'lazy', className: baseImageClass };
  } else {
    imageProps = {
      className: `lazyload ${baseImageClass}`,
      'data-src': imgSrc,
    };
  }

  const onError = (event: SyntheticEvent<HTMLImageElement>): void => {
    if (fallbackSrc) {
      // eslint-disable-next-line no-param-reassign
      event.currentTarget.src = fallbackSrc;
    }
  };

  return (
    <div
      {...props}
      className={classNames(
        className,
        absolute ? 'absolute' : 'relative',
        'overflow-hidden',
      )}
      style={{ background, ...props.style }}
      ref={ref}
    >
      {ratio && <div style={{ paddingTop: ratio, zIndex: -1 }} />}
      <img {...imageProps} alt={imgAlt} key={imgSrc} onError={onError} />
      {children}
    </div>
  );
}

ScalableImage = ({ src, alt, ...rest }: ImgHTMLAttributes<HTMLImageElement>) => {
  const [escStack, scalableImgSrc] = layoutStore.useStore((s) => [s.escStack, s.scalableImgSrc]);

  const enterEsc = useEscScope('scale-image', () => {
    closePreview();
  });

  const closePreview = () => {
    layoutStore.reducers.setScalableImgSrc('');
  };

  const openPreview = (e: React.MouseEvent) => {
    e.stopPropagation();
    enterEsc();
    layoutStore.reducers.setScalableImgSrc(src || '');
  };

  const onLoad = () => {
    emit('md-img-loaded');
  };

  return src ? (
    <span>
      <img
        style={{ cursor: 'zoom-in' }}
        onLoad={onLoad}
        src={src}
        onClick={openPreview}
        alt={alt || 'preview-image'}
        {...rest}
      />
      <span
        className={`${
          escStack.includes('scale-image') && src === scalableImgSrc
            ? 'fixed top-0 right-0 left-0 bottom-0 z-50 flex-all-center overflow-auto bg-desc'
            : 'hidden'
        }`}
        style={{ cursor: 'zoom-out' }}
        onClick={closePreview}
      >
        <img style={{ margin: 'auto' }} src={src} alt={alt || 'preview-image'} {...rest} />
      </span>
    </span>
  ) : null;
}

render() {
    const { blob, name, className, ops, autoHeight, maxLines, appDetail } = this.props;
    if (!blob.path) {
      return null;
    }

    let fileExtension = name.split('.').pop();
    let { after } = getSplitPathBy('tree');
    const { branch, tag } = getInfoFromRefName(blob.refName);
    let { pathname } = window.location;
    const curBranch = branch || tag;

    // 路径上没有tree/branch时先补全
    if (!pathname.includes('tree')) {
      after = `/${curBranch}`;
      pathname = `${pathname}/tree/${curBranch}`;
    }
    const fileSrcPrefix = `/api/${getOrgFromPath()}/repo/${appDetail.gitRepoAbbrev}/raw`;
    // 根据当前url拼接的文件路径
    const fileSrc = `${fileSrcPrefix}${after}`;
    const isFile = blob.path && blob.path.endsWith(fileExtension as string);
    // 当前url为文件路径时，内部链接要提升一级，以当前文件的目录为相对路径
    const urlIsFilePath = after.endsWith(`.${fileExtension}`);

    if (curBranch && fileExtension && (urlIsFilePath || isFile)) {
      fileExtension = fileExtension.toLowerCase();

      if (['md', 'markdown'].includes(fileExtension)) {
        // url已变化但blob还未更新，会以当前路径和旧的内容拼接图片链接导致404报错
        // getSplitPathBy中window.location.pathname自动encode过，故此处需要encode
        const afterBranch = decodeURIComponent(getSplitPathBy(curBranch).after.slice(1));
        let pass = false;
        if (!afterBranch) {
          // 仓库首页 /repo 时，blob路径没有/说明是对的
          pass = !blob.path.includes('/');
        } else if (urlIsFilePath) {
          // 在文件路径下时，对比path和blob.path
          pass = afterBranch === blob.path;
        } else {
          // 在文件夹路径下时，移除blob.path最后一段，与path进行对比
          pass = afterBranch === blob.path.split('/').slice(0, -1).join('/');
        }
        if (!pass) {
          // debugger;
          return null;
        }
        const { resolve, dirname } = pathLib;
        const components = {
          a({ href = '', children }: LinkHTMLAttributes<HTMLAnchorElement>) {
            let link = href;
            if (!href.startsWith('http') && !href.startsWith('#')) {
              if (urlIsFilePath) {
                link = resolve(dirname(pathname), link);
              } else {
                link = resolve(pathname, link);
              }
            }

            return <a href={link}>{children}</a>;
          },
          img({ src = '', alt, ...rest }: ImgHTMLAttributes<HTMLImageElement>) {
            // markdown中 src 的4种文件格式:
            // 1: http(s)://foo/bar.png -> src 不进行处理
            // 2: ./bar.png
            // 3: bar.png -> src 为相对路径，需要进行拼接处理
            // 4: /bar.png -> src 不进行处理
            let _src = src;
            if (src.startsWith('./')) {
              // src.slice(2) 是为了去掉开头的 ./
              _src = `${fileSrcPrefix}/${curBranch}/${src.slice(2)}`;
            } else if (src.startsWith('.')) {
              if (urlIsFilePath) {
                _src = pathLib.resolve(pathLib.dirname(fileSrc), src);
              } else {
                _src = pathLib.resolve(fileSrc, src);
              }
            } else if (!src.startsWith('/') && !src.startsWith('http')) {
              // 若 src 为相对路径，则对其进行路径拼接
              _src = `${fileSrcPrefix}/${curBranch}/${src}`;
            }

            return <img src={_src} alt={alt || 'preview-image'} {...rest} />;
          },
        };
        return (
          <FileContainer name={name} ops={ops} className={`repo-file ${className}`}>
            <MarkdownRender className="md-key" value={blob.content} components={components} />
          </FileContainer>
        );
      } else if (['png', 'jpg', 'jpeg', 'gif', 'bmp'].includes(fileExtension)) {
        // 路由切换时，比如 xx/a.img -> xx，after已经没有后缀了
        // 这时fileExtension还没变，要等接口返回后才变，这时再显示
        const notShow = after === '/' || !after.endsWith(fileExtension);
        return (
          <FileContainer name={name} ops={ops} className={`repo-file ${className}`}>
            <div className="text-center mt-4">
              {notShow ? null : <img style={{ maxWidth: '80%' }} src={fileSrc} alt="preview-image" />}
            </div>
          </FileContainer>
        );
      } else if (fileExtension === 'svg') {
        return (
          <FileContainer name={name} ops={ops} className={`repo-file ${className}`}>
            <div
              className="text-center mt-4"
              dangerouslySetInnerHTML={{ __html: blob.content && blob.content.replace('script', '') }}
            />
          </FileContainer>
        );
      }
    }

    if (!blob.binary) {
      const { qaResult, qaLine, isCheckQa } = this.state;
      const data = (qaResult as IQaItem[]).filter(
        (item) => item.path === blob.path && Number(item.line) === Number(qaLine),
      );
      const annotations = data.map((item) => ({
        row: Number(item.line) - 1,
        text: item.message,
        type: 'error',
      }));
      const markers = data.map((item) => ({
        startRow: Number(item.line) - 1,
        endRow: Number(item.line) - 1,
        startCol: 0,
        className: 'error-marker',
      }));

      return (
        <FileContainer name={name} ops={ops} className={`repo-file ${className}`}>
          <FileEditor
            name={name}
            fileExtension={isCheckQa ? 'text' : fileExtension === 'workflow' ? 'yml' : fileExtension || 'text'}
            value={blob.content}
            autoHeight={autoHeight}
            maxLines={maxLines}
            readOnly
            annotations={annotations}
            markers={markers}
          />
        </FileContainer>
      );
    }
    return (
      <FileContainer name={name} ops={ops} className={`repo-file ${className}`}>
        <div className="flex flex-wrap justify-center items-center raw-file-container">
          <a className="flex" href={fileSrc} target="_blank" rel="noopener noreferrer">
            <ErdaIcon className="mr-1" type="download" />
            <div className="mt-1"> {i18n.t('Download')} </div>
          </a>
        </div>
      </FileContainer>
    );
  }