Editor.md图片上传成功，但无法显示

Question

前端

1. 前端使用editor.md来完成图片的上传，已获取到上传成功后的图片路径但无法显示在右侧的展示栏

    var testEditor;
    $(function () {
        getBlogType();
        testEditor = editormd("test-editormd", {
            width: "100%",
            height: 800,
            syncScrolling: "single",
            path: "${ctx}/assets/editor/lib/",
            emoji: true,
            // theme : "dark",
            codeFold: true,
            searchReplace: true,
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                        // 图片上传路径
            imageUploadURL: "${ctx}/utilConotroller/fileUpload"
        });
    });

后端

• 后端使用SSM，来完成文件的上传和存储文件信息

    public JSONObject insertFile(MultipartFile file, HttpServletRequest request) {
        JSONObject jsonObject = new JSONObject();
        ImgUpload imgUpload = new ImgUpload();
        Map<String, Object> map =null;
        try {
            map = FileUploader.upload(file,request);
        } catch (Exception e) {
            e.printStackTrace();
        }
        System.out.println(map.get("size"));
        imgUpload.setId(UUIDUtil.getUUID());
        imgUpload.setImgName(new String(String.valueOf(map.get("name")).getBytes(), StandardCharsets.UTF_8));
        imgUpload.setCreateTime(new Date());
        imgUpload.setImgSize((Long) map.get("size"));
        imgUpload.setUrl((String) map.get("path"));
        imgUpload.setSuffix((String) map.get("suffix"));
        try {
            imgUploadDao.addFile(imgUpload);
            jsonObject.put("success",1);
            jsonObject.put("message","上传成功");
            jsonObject.put("url",imgUpload.getUrl());
            System.out.println(jsonObject.toJSONString());
        } catch (Exception e) {
            e.printStackTrace();
            jsonObject.put("success",0);
            jsonObject.put("message","上传失败");
        }
        return jsonObject;
    }

• 文件上传工具类

    public static Map<String, Object> upload(MultipartFile file, HttpServletRequest request) {
        Map<String, Object> map = new HashMap<>();
        String fileName = file.getOriginalFilename();
        String suffix = fileName.substring(fileName.lastIndexOf("."));
        String contextPath = request.getSession().getServletContext().getRealPath("uploader");
        String path = contextPath + File.separator + fileName;
//        String path = "src"+ SEPARATOR + "main" + SEPARATOR + "webapp" + SEPARATOR + "upload" + SEPARATOR + fileName;
        log.info("path:{}",path);
        File targetFile = new File(contextPath);
        if (!targetFile.exists()) {
            targetFile.mkdir();
        }
        try {
            file.transferTo(new File(path));
            map.put("name",fileName);
            map.put("path",path);
            map.put("size",file.getSize());
            map.put("suffix",suffix);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return map;
    }

文件上传成功，返回文件路径

• 但图片无法显示

• 这是路径

![](D:\SSM\target\demo\uploader\I}CEGS[J$2Q~7BI~8EF1O7G.jpg)

网上有关editor.md的资料比较少，没有能解决我的问题，希望有了解这个问题的点拨我一下，谢谢！

项目地址：http://118.126.117.177:8080/demo/blogInfoController/addBlog

Answer 1

这路径肯定不对啊，应该是远程图片地址，比如：http://118.126.117.177:8080/download/dgufdsasd.png