Summernote图片上传后无法显示在编辑器里怎么办？

IT人可慧提问于 2026-01-29 10:05:30 阅读 95

组件

在用Summernote配置图片上传功能时，虽然后端返回了正确的图片URL，但上传成功后编辑器里还是显示叉号。我检查过网络请求没问题，返回的JSON格式也符合文档要求，这是什么情况？

我的配置是这样的：


$('.summernote').summernote({
  height: 300,
  callbacks: {
    onImageUpload: function(files) {
      uploadImage(files[0]);
    }
  }
});

function uploadImage(file) {
  const data = new FormData();
  data.append('image', file);
  $.post('/upload', data, (response) => {
    console.log('上传成功:', response.url); // 这里确实有正确的图片路径
  });
}

后端返回的JSON是这样的：


{
  "url": "/uploads/image.jpg",
  "filename": "image.jpg"
}

折腾了一下午没搞定，求大神看看是不是哪里没配置对？

富文本编辑器

我来解答赞 11 收藏

反馈

2 条解答

A. 春萍 Lv1

这个问题我之前也遇到过，一般是前端回调没插入图片链接导致的。Summernote 的 onImageUpload 只负责上传逻辑，上传完成后需要手动插入图片链接到编辑器里，不然它不会自动显示。

你现在的代码只打印了返回的 url，但没把这个 url 插入进编辑器。修改一下你的 uploadImage 函数，在上传成功后用 summernote('insertImage', url) 插入图片，像这样：

function uploadImage(file) {

  const data = new FormData();

  data.append('image', file);

  $.post('/upload', data, (response) => {

    console.log('上传成功:', response.url);

    $('.summernote').summernote('insertImage', response.url); // 加上这句

  });

}

这样上传成功后就会把图片插入到光标位置了。

如果多个地方用到 summernote，最好在 onImageUpload 里用 $(this) 而不是固定选择器：

onImageUpload: function(files) {

  const $summernote = $(this);

  uploadImage(files[0], $summernote);

}

然后 uploadImage 函数里调用：

function uploadImage(file, $summernote) {

  const data = new FormData();

  data.append('image', file);

  $.post('/upload', data, (response) => {

    $summernote.summernote('insertImage', response.url);

  });

}

这样就更通用一点。你先试试第一种，确认图片能正常插入。再检查一下返回的 url 是否能正常访问，有时候 403 或 404 也会显示叉叉。

2026-02-03 18:02

端木统宇 Lv1

你这个问题我遇到过，确实是 Summernote 的图片上传回调没处理好。虽然后端返回的 URL 没问题，但你还得把图片路径插回到编辑器里，不然它不会自动显示。

关键是 onImageUpload 这个回调函数，你只是调用了上传方法，但没有把上传成功后的图片插入到编辑器中。修改你的代码如下：

$('.summernote').summernote({

  height: 300,

  callbacks: {

    onImageUpload: function(files) {

      uploadImage(files[0]);

    }

  }

});



function uploadImage(file) {

  const data = new FormData();

  data.append('image', file);

  $.post('/upload', data, (response) => {

    // 把上传成功的图片URL插入到编辑器

    $('.summernote').summernote('insertImage', response.url);

  });

}

重点就是这一行：$('.summernote').summernote('insertImage', response.url);，它会把后端返回的图片路径正确插入到编辑器内容里。这样就不会再显示叉号了。

另外提醒一下，确保返回的 response.url 是完整的可访问路径，如果是相对路径的话可能会有问题。如果还搞不定，可以在浏览器开发者工具里检查下图片的真实请求地址对不对。

2026-01-29 10:25