Syncfusion Document Editor是否支持URL图片源？URL图片无法渲染求助

问题描述 #

使用Syncfusion Document Editor时，base64格式的图片能正常显示，但以URL作为图片源时，编辑器无法渲染图片或提示找不到图片。用于将HTML转换为SFDT的代码如下：

public static String htmlToSfdt(String html) throws Exception {
    html = "<img src=\"http://localhost:8080/app/resources/rtf/1/test.001.png\"/>";
    byte[] bytes = html.getBytes(StandardCharsets.UTF_8);
    InputStream stream = new ByteArrayInputStream(bytes);       
    String sfdt = WordProcessorHelper.load(stream, com.syncfusion.ej2.wordprocessor.FormatType.Html);
    stream.close();
    return sfdt;
}

生成SFDT传入编辑器后，图片无法正常显示，效果如下：

可能的原因及解决办法 #

• 跨域限制
  若编辑器前端运行环境与图片URL的域名/端口不一致，浏览器会因同源策略阻止图片加载。解决方式：

  • 在图片所在服务器配置CORS规则，允许编辑器前端域名的跨域请求；
  • 后端将URL图片转换为base64格式后再嵌入HTML，避免跨域问题。

• 图片URL不可访问
  先验证图片URL在编辑器前端环境中是否能正常打开：直接在浏览器地址栏输入http://localhost:8080/app/resources/rtf/1/test.001.png，确认图片能加载。若无法访问，检查后端服务是否运行、路径是否正确、端口是否匹配。

• Syncfusion转换逻辑限制
  WordProcessorHelper.load方法默认不会自动远程加载URL图片，需手动处理图片资源。可在转换前将URL图片下载并转为base64，修改后的代码示例：

import java.io.InputStream;
import java.net.URL;
import java.util.Base64;
import java.nio.charset.StandardCharsets;

public static String htmlToSfdt(String html) throws Exception {
    String imageUrl = "http://localhost:8080/app/resources/rtf/1/test.001.png";
    // 下载图片并转为base64
    try (InputStream imageStream = new URL(imageUrl).openStream()) {
        byte[] imageBytes = imageStream.readAllBytes();
        String base64Image = Base64.getEncoder().encodeToString(imageBytes);
        html = "<img src=\"data:image/png;base64," + base64Image + "\"/>";
    }
    
    byte[] bytes = html.getBytes(StandardCharsets.UTF_8);
    try (InputStream stream = new ByteArrayInputStream(bytes)) {       
        return WordProcessorHelper.load(stream, com.syncfusion.ej2.wordprocessor.FormatType.Html);
    }
}

内容的提问来源于stack exchange，提问作者Eduardo Roque