如何配置Kibana实现图表字段可点击 点击弹窗访问本地路径图片

你当前的Kibana图表参考：

首先明确核心限制：浏览器默认安全策略禁止网页直接访问本地磁盘的file://协议路径，直接绑定本地路径会被拦截，所以要先解决资源访问问题，再配置Kibana交互。

步骤1：搭建本地静态图片服务，绕过浏览器安全限制 #

把你存储图片的本地目录映射成HTTP可访问的静态服务，操作成本很低：

• 打开终端，进入你存图片的根目录，比如图片都存在E:/monitor_imgs/下，就切到这个目录
• 如果本地装了Python3，直接执行命令：python -m http.server 8899
• 执行完之后，目录下的所有图片都可以通过http://localhost:8899/[图片文件名]的形式正常访问，不会触发安全拦截。
• 提前处理索引字段：如果原来存的是磁盘本地路径，比如E:/monitor_imgs/err_001.jpg，可以在索引写入时加个ingest管道，把路径前缀替换成http://localhost:8899/，生成专门的img_access_url字段供前端使用；不想改写入逻辑的话，也可以直接在Kibana字段格式模板里做字符串替换。

步骤2：配置Kibana字段格式，实现点击弹窗 #

• 打开Kibana的索引模式设置页（Stack Management -> Index Patterns），找到存储图片路径的字段，点击字段右侧的编辑按钮。
• 字段格式（Format）下拉选择「Url」类型：
  • 不想写自定义代码的话，直接选子类型为「图片」，设置合适的默认预览宽高，Kibana自带的图片格式自带点击放大的弹窗效果，不用额外开发。
  • 需要自定义弹窗尺寸、交互的话，选子类型为「链接」，在模板输入框填以下代码即可：

    <a href="{{value}}" onclick="window.open(this.href,'imgWin','width=900,height=700,scrollbars=yes');return false;">查看对应图片</a>
    

  • URL模板如果是直接用转换好的img_access_url字段，填{{img_access_url}}即可；如果用原本地路径字段，直接在模板里做字符串替换，比如原字段是local_path，就填{{local_path value="replace('E:/monitor_imgs/', 'http://localhost:8899/')}}"。
• 保存字段配置，回到你的可视化图表/Dashboard页面刷新，点击对应路径字段就会弹出固定尺寸的窗口加载对应图片。

多用户场景适配 #

如果Kibana服务是给多人访问使用，不要把静态服务搭在个人本地电脑上，把图片存储目录部署到内网所有用户都能访问的服务器上，把图片访问地址换成内网HTTP地址即可，配置逻辑和上述流程完全一致。

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