这个问题我之前帮人排查过，核心原因其实是浏览器的同源策略在搞鬼！当你直接在浏览器打开本地HTML文件时，用的是file://协议；但CKEditor运行在Web应用里，用的是http://或https://协议，这俩属于不同源，浏览器会拦截跨协议的资源加载，所以图片显示不出来。下面给你几个可行的解决方案：

方案一：把模板和图片移到Web应用的静态资源目录 #

这是最稳妥的做法，彻底规避跨域问题：

• 找到你的Web应用的静态资源根目录（比如C:/webapp/static），把C:/editor/template整个目录复制过去，变成C:/webapp/static/template
• 修改HTML模板里的图片引用路径，把绝对本地路径改成相对路径或者Web根目录相对路径：
  • 比如原来的src="C:/editor/template/images/logo.jpg"改成src="./images/logo.jpg"（相对模板文件的路径）
  • 或者改成src="/static/template/images/logo.jpg"（相对于Web应用根目录的绝对路径）
• 之后用Web应用的URL加载这个模板（比如http://localhost:8080/static/template/index.html），CKEditor就能正常加载图片了。

方案二：用本地Web服务器托管模板目录 #

如果不想移动文件，可以给模板目录搭个临时本地服务器，让CKEditor通过HTTP协议访问资源：

• 打开命令提示符，切换到模板根目录：cd C:/editor/template
• 用Python启动简易服务器（Python 3的话）：python -m http.server 8000
• 修改HTML模板里的图片路径为HTTP协议的地址：比如src="http://localhost:8000/images/logo.jpg"
• 让CKEditor加载http://localhost:8000/index.html这个地址的模板，图片就能正常显示了。

提示：如果没有Python，也可以用Apache、Nginx这类服务器来托管这个目录，配置方法类似。

方案三：检查CKEditor的内容权限配置 #

有时候CKEditor的默认配置会过滤掉图片标签或src属性，也会导致图片不显示：

• 找到CKEditor的config.js配置文件，添加或修改以下配置：

CKEDITOR.editorConfig = function( config ) {
    // 允许所有内容（或者更精细地允许图片相关属性）
    config.allowedContent = true;
    // 或者精准配置：允许img标签的src、alt属性
    // config.extraAllowedContent = 'img[src,alt]';
};

• 保存配置后重启CKEditor，再加载模板试试。

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