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

这个问题我遇到过，主要是因为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来自定义处理后端返回的数据。这样既能保证兼容性，又不需要修改后端代码。如果你还有其他问题，可以继续提问，我会帮你解决！