图片是否可以在readonly模式预览的问题

[Stephenqhd30]

问题描述

如果上传的是对象存储中的一个可访问地址以.jpg .png格式结尾的话就无法预览展示
而是展示成一个链接的形式
版本: "@ant-design/md-editor": "^1.15.42",

希望大佬们可以帮我解答一下或者提供一下其他的实现思路

例如

图片 （官方示例的代码中）

![](https://mdn.alipayobjects.com/huamei_gcee1x/afts/img/A*9F0qRYV8EjUAAAAAAAAAAAAADml6AQ/original)

自己实现的代码

<img src="https://butterfly-1318299170.cos.ap-shanghai.myqcloud.com/stephen/post_image_cover/1782755477639864321/e058847c873d41368a02c5522fc1fcb1.png" alt="" height="552" />

如果点击的话图片还是可以访问的 但是在readonly模式下会以链接的形式展示

实现代码

import { MarkdownEditor, MarkdownEditorInstance } from '@ant-design/md-editor';
import { Card, message, Tooltip } from 'antd';
import { uploadFileUsingPost } from '@/services/stephen-backend/fileController';
import { FileUploadBiz } from '@/enums/FileUploadBizEnum';
import React, { useRef } from 'react';

interface Props {
  value?: string;
  onChange?: (value: string) => void;
}

/**
 * Markdown 编辑器
 * @constructor
 */
const MdEditor: React.FC<Props> = (props) => {
  const { value = '', onChange } = props;
  const editorRef = useRef<MarkdownEditorInstance>();
  /**
   * 图片上传
   * @param files
   */
  const uploadImages = async (files: File[] | string[]): Promise<string[]> => {
    try {
      const uploadedUrls = await Promise.all(
        files.map(async (file) => {
          const res = await uploadFileUsingPost(
            {
              biz: FileUploadBiz.POST_IMAGE_COVER,
            },
            { file },
            file,
          );

          if (res.code === 0 && res.data) {
            return res.data;
          } else {
            message.error(`图片上传失败: ${res.message}`);
            return '';
          }
        }),
      );

      // 过滤掉上传失败的图片，返回 URL 数组
      return uploadedUrls.filter(Boolean);
    } catch (error: any) {
      message.error(`图片上传失败: ${error.message}`);
      return [];
    }
  };

  return (
    <Card title={'编辑器'}>
      <MarkdownEditor
        editorRef={editorRef}
        initValue={value}
        onChange={onChange}
        width={'100vw'}
        readonly={false}
        image={{
          upload: uploadImages,
        }}
        fncProps={{
          render: (props, _) => {
            return <Tooltip title={props.children}>{_}</Tooltip>;
          },
        }}
        toc={false}
        height={600}
      />
    </Card>
  );
};

export default MdEditor;

[Stephenqhd30]

补充一下 在@ant-design/pro-editor的Markdown组件中则可以实现该功能

<Markdown>{post.content}</Markdown>
![](https://butterfly-1318299170.cos.ap-shanghai.myqcloud.com/stephen/post_image_cover/1782755477639864321/a022fb1e82ea4da9adc13b5832b3dd62.jpg)

[Stephenqhd30]

感谢官方解决了bug