WangEditor上传图片后无法显示，是什么原因？

我踩过这个坑，血泪教训啊。你这个不是配置问题，是路径解析错了。

你后端返回的路径是 /uploads/123.jpg，但浏览器实际请求的是 /editor/assets/123.jpg，说明编辑器把相对路径当成了相对当前页面路径去拼了。

WangEditor 在没指定 uploadImgShowUrl 的时候，默认会把返回的 url 当成相对路径处理，如果你页面路径是 /editor/index.html，那它就会拼成 /editor/uploads/123.jpg，但更诡异的是它还可能走内置的静态资源路径逻辑，变成 /editor/assets/123.jpg —— 这个路径你后端肯定没有，当然 404。

解决办法有两个：

第一个是后端返回完整 URL，比如 http://your-domain.com/uploads/123.jpg，这样编辑器就不会乱拼了。

第二个是配置 uploadImgShowUrl，告诉编辑器“我返回的路径是相对根路径的”：

const editor = new WangEditor('#editor');

editor.config.uploadImgServer = '/api/upload';

editor.config.uploadImgShowUrl = ''; // 空字符串表示返回的 url 是绝对路径（以 / 开头）

editor.config.customInsertFn = (insertFn) => {

  return (url) => {

    insertFn(url);

  };

};

editor.create();

注意 uploadImgShowUrl 设为空字符串，而不是省略它，这是关键。我之前就是照着文档抄，以为不配就默认是根路径，结果踩了好久。

另外再确认下：你返回的 JSON 字段是不是叫 url？WangEditor 默认认的就是 url，没问题。但如果后端返回的是 data.url 或者其他字段名，还得配 uploadImgParams 或 uploadImgAccept 去解析，不过你这个描述看应该不是这个问题。

总之，先试试加个 uploadImgShowUrl: ''，大概率就解决了。

这个问题我遇到过，主要是因为WangEditor的图片上传机制和后端返回的路径之间存在不匹配。原理是这样：WangEditor会根据后端返回的数据结构来处理图片路径，但如果返回的路径不符合它的预期，就会导致图片无法正确显示。

### 具体问题分析
1. **后端返回的JSON结构**：你提到后端返回的是{"url": "/uploads/123.jpg"}，这个结构本身没错，但WangEditor默认期望的是一个数组形式的URL列表。
2. **路径被修改的问题**：浏览器网络请求显示路径变成了/editor/assets/123.jpg，这是因为WangEditor内部对路径进行了拼接，但它拼接的逻辑依赖于后端返回的数据格式是否符合预期。

### 解决方案
我们需要调整后端返回的数据结构，或者通过前端配置告诉WangEditor如何正确处理返回的数据。

#### 方法一：调整后端返回的数据结构
WangEditor默认期望的返回值是一个数组，例如：

[

  "http://yourdomain.com/uploads/123.jpg"

]

如果你能修改后端代码，直接返回这样的结构就可以解决问题。

如果不想改后端，我们还可以通过前端配置来解决。

#### 方法二：自定义uploadImgHooks
WangEditor提供了一个uploadImgHooks钩子，可以让我们在上传完成后对返回的数据进行处理。以下是具体的实现步骤：

1. 修改你的配置代码如下：

// 初始化编辑器

const editor = new WangEditor('#editor');



// 配置上传图片的服务器地址

editor.config.uploadImgServer = '/api/upload';



// 自定义上传完成后的钩子

editor.config.uploadImgHooks = {

  // 成功时的钩子

  success: function (xhr, editor, result) {

    // 后端返回的数据是 {"url": "/uploads/123.jpg"}

    const url = result.url; // 获取返回的图片路径



    // 确保路径是完整的 URL（带域名）

    const fullUrl = getFullImageUrl(url); // 调用辅助函数生成完整路径



    // 将完整路径插入到编辑器中

    editor.cmd.do('insertImage', [fullUrl]);

  },

  // 失败时的钩子

  fail: function (xhr, editor, result) {

    console.error('图片上传失败:', result);

  },

  // 请求错误时的钩子

  error: function (xhr, editor) {

    console.error('图片上传请求出错');

  },

};



// 辅助函数：将相对路径转换为完整路径

function getFullImageUrl(relativePath) {

  const domain = 'http://yourdomain.com'; // 替换为你的域名

  if (relativePath.startsWith('http')) {

    return relativePath; // 如果已经是完整路径，直接返回

  }

  return ${domain}${relativePath}; // 拼接成完整路径

}



// 创建编辑器

editor.create();

2. **解释一下这段代码**：
- success钩子会在图片上传成功后触发，我们可以在这里处理后端返回的数据。
- getFullImageUrl函数确保图片路径是完整的URL（带域名），避免路径拼接出错的问题。
- 如果后端返回的路径是相对路径（比如/uploads/123.jpg），我们需要手动拼接成完整路径（比如http://yourdomain.com/uploads/123.jpg）。

3. **注意点**：
- 替换代码中的http://yourdomain.com为你自己的域名。
- 如果后端返回的字段名不是url，而是其他名字（比如imageUrl），记得修改result.url为对应的字段名。

#### 方法三：检查CORS跨域问题
如果你确认路径是对的，但仍然报404错误，可能是CORS跨域问题导致浏览器无法加载图片资源。需要确保后端允许跨域访问图片资源。

- 在Nginx或Apache等服务器配置中，添加类似以下的CORS头：

add_header Access-Control-Allow-Origin *;

---

### 总结
最推荐的方法是使用uploadImgHooks来自定义处理后端返回的数据。这样既能保证兼容性，又不需要修改后端代码。如果你还有其他问题，可以继续提问，我会帮你解决！