Vditor 图片上传后无法直接显示图片

配置

配置.png

返回值

返回值.png

文档数据格式

文档的格式规范.png

但却无法直接显示图片,请问是为什么?🙏

  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    132 引用 • 957 回帖 • 2 关注
  • 图片上传
    5 引用 • 6 回帖
  • 图片处理
    12 引用 • 33 回帖
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    2160 引用 • 12960 回帖 • 550 关注

广告 我要投放

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • pi-dal 1 评论
    作者

    @Vanessa

    V 姐,这个问题怎么解决呢,请赐教

    我看别人都用 format 格式化,但是我这个返回值和文档格式一样,但仍然显示不了图片

    1 回复
    success 后要自己处理
    Vanessa
  • darknight

    我返回的 filename 带上后缀就可以显示图片,不带就显示链接 [c](https://b3logfile.com/file/2020/07/ir-67cd956c.gif)

  • sanshao

    我用官方的文档也不行;

    然后按照 v 姐的 success 提醒,调整了 response 返回值,并在 success 中处理了内容

    {"status":200,"data":[{"name":"子午人才2.png","url":"https://asset.51shuitong.com/local/1613358941397905481.png"}]}
    

    success 方法

     success(editor, response) {
               let succFileText=''
               const res = JSON.parse(response)
               res.data.forEach(item => {
                 const path = item.url;
                 const name = item.name;
                 const lastIndex = name.lastIndexOf(".");
                 let type = name.substr(lastIndex);
                 type = type.toLowerCase();
                 if (type.indexOf(".wav") === 0 || type.indexOf(".mp3") === 0 || type.indexOf(".ogg") === 0) {
                   if (that.contentEditor.currentMode === "wysiwyg") {
                     succFileText += `<div class="vditor-wysiwyg__block" data-type="html-block"
     data-block="0"><pre><code><audio controls="controls" src="${path}"></audio></code></pre>`;
                   } else if (that.contentEditor.currentMode === "ir") {
                     succFileText += `<audio controls="controls" src="${path}"></audio>\n`;
                   } else {
                     succFileText += `[${name}](${path})\n`;
                   }
                 } else if (type.indexOf(".apng") === 0
                   || type.indexOf(".bmp") === 0
                   || type.indexOf(".gif") === 0
                   || type.indexOf(".ico") === 0 || type.indexOf(".cur") === 0
                   || type.indexOf(".jpg") === 0 || type.indexOf(".jpeg") === 0 || type.indexOf(".jfif") === 0 || type.indexOf(".pjp") === 0 || type.indexOf(".pjpeg") === 0
                   || type.indexOf(".png") === 0
                   || type.indexOf(".svg") === 0
                   || type.indexOf(".webp") === 0) {
                   if (that.contentEditor.currentMode === "wysiwyg") {
                     succFileText += `<img alt="${name}" src="${path}">`;
                   } else {
                     succFileText += `![${name}](${path})\n`;
                   }
                 } else {
                   if (that.contentEditor.currentMode === "wysiwyg") {
                     succFileText += `<a href="${path}">${name}</a>`;
                   } else {
                     succFileText += `[${name}](${path})\n`;
                   }
                 }
               });
               console.log("succFileText",succFileText)
               that.contentEditor.insertValue(`${succFileText}`)
    
             }