富文本编辑器里图片上传后无法显示怎么办？

钰文 Dev 提问于 2026-03-25 14:56:24 阅读 5

组件

我用 Vue3 + Quill 做了个富文本编辑器，图片上传接口能成功返回 URL，但插入后页面上只显示一个空白占位符，图片根本加载不出来，控制台也没报错，这到底哪出问题了？

我试过直接把返回的 URL 放到 img 标签里是可以正常访问的，说明链接没问题。是不是 Quill 插入图片的方式不对？

<template>
  <div ref="editor"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import Quill from 'quill'

onMounted(() => {
  const quill = new Quill(ref('editor').value, { theme: 'snow' })
  quill.getModule('toolbar').addHandler('image', () => {
    // 模拟上传后拿到 url
    const imageUrl = 'https://example.com/uploaded.jpg'
    quill.insertEmbed(quill.getSelection(), 'image', imageUrl)
  })
})
</script>

图片上传

我来解答赞 2 收藏

反馈

1 条解答

玉楠 Lv1

这个问题听起来像是路径或者格式的问题。虽然你说 URL 是可以直接访问的，但有时候 Quill 处理这些 URL 的方式有点儿特殊。你可以尝试一下确保 URL 是绝对路径，并且检查一下 Quill 是否对插入的内容做了什么处理。

在你的代码里，插入图片的部分看起来是正确的，但有时候 Quill 需要特定的格式或者转义某些字符。你可以先检查一下 Quill 的文档，看看是否有相关的配置项。

不过，在不改动太多的情况下，你可以尝试这样处理一下：

onMounted(() => {

  const quill = new Quill(ref('editor').value, { theme: 'snow' })

  quill.getModule('toolbar').addHandler('image', () => {

    // 模拟上传后拿到 url

    let imageUrl = 'https://example.com/uploaded.jpg'

    // 确保 URL 是绝对路径并且转义

    if (!imageUrl.startsWith('http://') && !imageUrl.startsWith('https://')) {

      imageUrl = 'https://' + imageUrl

    }

    // 尝试直接插入

    quill.insertEmbed(quill.getSelection().index, 'image', imageUrl)

  })

})

记得转义 URL 特殊字符，特别是如果 URL 是从用户输入来的。虽然你这里硬编码了 URL，但养成好习惯总是好的。

如果还是不行，可能需要调试一下 Quill 内部是怎么处理插入的图片的，看看有没有被过滤掉或者修改了。有时候 Quill 的默认行为会让人头疼，但大多数情况下，配置一下就能解决。

希望这些建议对你有帮助，加油！

2026-03-25 15:03