企业官网建设流程全解析

Dify工作流图片显示不出来？三种方案完整指南

【免费下载链接】Awesome-Dify-Workflow分享一些好用的 Dify DSL 工作流程，自用、学习两相宜。 Sharing some Dify workflows.项目地址: https://gitcode.com/GitHub_Trending/aw/Awesome-Dify-Workflow

做 Dify工作流 测试时，一个很经典的翻车现场：大模型明明吐出了一个正常的图片 URL，你按 markdown 格式贴进聊天窗口，预览区却是一片空白。问题往往不在流程本身，而在于图片显示这一环。这篇文章基于 Awesome-Dify-Workflow 项目整理三条路线：本地静态图怎么放、动态图表怎么生成、知识库里的图文怎么带出来，每条都配了项目里的真实工作流示例，可以直接导入照着改。

🧭 先选路：图片从哪来，决定走哪条方案

Dify 里"图片不出来"通常是三种不同的事，先对号入座再动手：

其中最常见的第一类故障原因是跨域。所谓跨域，就是浏览器和前端渲染层的安全机制：图片文件放在 A 服务器，你的页面在 B 环境里加载它，对方没给"允许被引用"的响应头，图片就会静默失败——不报错，就是空白。Dify 官方仓库的常见问题里就有人遇到过这种情况：拿到的图片 URL 拼进回复，markdown 语法没问题，但渲染不出来，原因就是图片服务不支持跨域。

上面这张截图就是典型的翻车现场：直接回复节点里输出的是图片1这种标准写法，但预览里只剩文字。遇到这种问题，先别怀疑语法，先确认图片地址支不支持被跨域引用。

📷 本地图片：跟项目放一起，用相对路径引用

图片不经过网络、不经过第三方，就不会有跨域问题。这是最稳的一条路：文件放在仓库里，用相对路径引用，跨环境迁移时路径跟着项目走，不会断。

操作步骤只有三步：

1. 在仓库根目录建一个放图的目录，比如images/或snapshots/；
2. 把图片文件放进去，命名尽量见名知意；
3. 在 markdown 或工作流文案里写相对路径，注意目录名和扩展名别打错（把snapshots/写成images/这类低级错误很常见）。

案例：春联生成器把文字变成图片

DSL/春联生成器.yml 是这条路线的典型。整个流程只有四个节点：开始、LLM、代码执行、模板转换（配合结束节点），大模型负责写春联文案，代码执行节点负责把文案画成一张图返回。

从截图可以看到，左侧画布上是开始 → LLM → 代码执行 → 结束的线性链路，右侧测试面板直接输出渲染好的春联图片。图片是在流程内部生成的，不依赖任何外部图床，所以不存在跨域和路径失效问题。

📊 动态图表：sandbox 里画完图，转成 base64 再输出

运行时才产生的图表（折线图、柱状图、数据分布图）没法预先存到仓库里，得走"代码出图"路线：在 Dify 的代码执行节点（运行在 sandbox 沙箱里，可以执行 Python）中用 matplotlib 画图，再把图片二进制编码成 base64 字符串（把图片变成一段纯文本）随回复带出去，由前端渲染。

案例：matplotlib 出图

DSL/matplotlib.yml 的流程很短：开始 → 代码执行 → 直接回复。代码节点里画一张正弦曲线图，输出 base64，回复节点里用图的形式嵌入即可显示。

核心转换逻辑就这几行，解决的是"图怎么从代码节点变成能显示的东西"：

import base64 from io import BytesIO buffer = BytesIO() plt.savefig(buffer, format='png') buffer.seek(0) image_base64 = base64.b64encode(buffer.getvalue()).decode()

注意 README 里特别提醒过：官方 sandbox 装 matplotlib 的权限比较复杂，装完也未必能用，作者配套维护了 dify-sandbox-py 方案，装库时留意一下。

延伸案例：从读文件到出图表的完整链路

DSL/File_read.yml 展示了数据侧的处理：开始节点接收上传文件，代码节点拿到文件路径，再用 pandas 读取 CSV、输出统计结果，右侧预览能看到数据样本和行列数。把它和 DSL/数据分析.7z 里的数据库查询流程组合，就是"取数 → 分析 → 出图"的完整闭环，图表部分照样用 base64 回传。

🖼️ 直接渲染页面：Artifact 插件的用法

如果你的需求不是"出一张图"，而是"出一个能看的页面"——带图标、时间轴、表格的行程单、报告、卡片——那图片方案反而是绕远路。DSL/Artifact.yml 搭配作者开发的 Artifacts 扩展插件，走的是另一条路：让大模型直接生成 HTML，由插件前端渲染出来。

截图里左侧是对话输入，右侧就是渲染后的可视化页面。这个插件借鉴了 Anthropic 的 Artifacts 思路，流程只有开始 → LLM → 直接回复三个节点，复杂度低。适合数据看板、地图信息、交互式说明这类"图其实是页面"的场景；纯展示、需要存档的，还是建议走前面的出图路线。

📚 知识库图文：把图片链接写进文档里

第三条路线针对问答场景：希望检索知识库后，回答里既有关键点文字，又带对应的图。

DSL/图文知识库/图文知识库.yml 的流程是：开始 → 知识检索 → LLM → 直接回复。做法很直白——往知识库文档里写内容时，把图片的远程链接以 markdown 形式放在段落旁边，检索命中哪一段，图片链接就跟着哪一段被 LLM 带进回答。

截图右侧预览面板里，回答同时包含接口地址和技术说明文字。这里同样受跨域约束：文档里嵌的图片链接必须来自允许跨域引用的地址，否则又是空白。所以这条路线的前提是你有一张"稳定且支持跨域"的图片链接，本地图片先托管再引用。

🩺 快速自检：三步定位图片不显示

排查时按顺序过一遍，大多数情况能当场解决：

1. 路径对不对：把相对路径换成完整 URL 直接访问，确认文件本身能打开；
2. 跨域支不支持：浏览器控制台看网络请求，图片请求 200 但没渲染，基本就是响应头不允许跨域引用；
3. 限制够不够：节点间传的字符串被截断也会让图片 base64 残缺。Dify 默认对代码节点和模板转换的字符串长度有上限，长图很容易撞线，把.env里这两项调大再重启容器即可：

CODE_MAX_STRING_LENGTH: 1000000 TEMPLATE_TRANSFORM_MAX_LENGTH: 1000000

另外，Dify 新版本也自带了图表渲染能力（柱状图、曲线图等），简单图表可以先试内置方案，复杂需求再上 base64 路线。

🚀 延伸：拿到项目，按顺序学

项目里所有 DSL 都是工作流模式，可以直接导入 Dify（建议 0.13.0 及以上版本）后按需改模型和提示词：

git clone https://gitcode.com/GitHub_Trending/aw/Awesome-Dify-Workflow

建议的学习顺序：先看 DSL/simple-kimi.yml 熟悉最基础的问答结构，再学 DSL/matplotlib.yml 掌握出图，然后试 DSL/Artifact.yml 理解 HTML 渲染，最后拿 DSL/数据分析.7z 和 DSL/File_read.yml 把"取数—分析—出图"整条链路串起来。每条路线解决的是不同层的问题：本地图片管"存得住"，base64 管"画得出"，Artifact 管"看得爽"，图文知识库管"找得到"——先判断你的场景落在哪一层，再选对应的方案，比反复调节点参数省事得多。

【免费下载链接】Awesome-Dify-Workflow分享一些好用的 Dify DSL 工作流程，自用、学习两相宜。 Sharing some Dify workflows.项目地址: https://gitcode.com/GitHub_Trending/aw/Awesome-Dify-Workflow