ReactQuill组件图片src显示[object Object]问题求助

问题原因 #

你直接将JSX对象传给了ReactQuill的value属性，ReactQuill无法解析JSX，会将其转换为字符串，导致图片标签的src属性被转为"[object Object]"。而直接在DOM中输出{article.content}正常，是因为React本身可以直接渲染JSX元素，但ReactQuill不支持JSX作为输入值，它只接受HTML字符串或Delta格式数据。

解决方案 #

步骤1：将JSX转换为HTML字符串 #

使用react-dom/server的renderToString方法，把JSX对象转换成标准HTML字符串，再传给ReactQuill。

首先导入依赖：

import ReactDOMServer from 'react-dom/server';

步骤2：处理内容并传入组件 #

在组件中处理article.content，转换为HTML后再赋值给value：

<Container>
  {article && <>
    {article.content.toString()}
    <br></br>
    {article.content}
  </>}
  {/* 处理JSX为HTML字符串 */}
  {const htmlContent = article?.content ? ReactDOMServer.renderToString(article.content) : '';}
  <ReactQuill
    ref={(el) => {
      quillRef = el;
    }}
    theme="snow"
    value={htmlContent}
    onChange={handleChangeEditor}
    formats={formats}
    modules={modules}
    padding={0}
  />
</Container>

额外检查 #

如果article.content本身就是HTML字符串，但其中图片的src是对象（比如后端返回的HTML里嵌入了对象），需要先遍历HTML内容，将图片的src对象替换为实际的URL字符串。例如：

// 假设图片src对象包含url属性，替换HTML中的对应内容
const processedContent = article?.content.replace(/<img[^>]*src="\[object Object\]"/g, (match) => {
  // 根据实际数据结构获取图片URL，这里示例假设从article的images数组中取对应url
  const imageUrl = article.images[0].url; // 需根据你的数据结构调整
  return match.replace("[object Object]", imageUrl);
});

内容的提问来源于stack exchange，提问作者Sithu Soe