【Dify系列教程重置精品版】第六章：在Dify对话中显示图片

### 实现图片在Dify聊天界面中的展示 为了实现在Dify聊天界面中展示图片的功能，可以采用如下方法： #### 利用Markdown语法嵌入图片链接 当通过API向Dify发送消息时，可以在消息体中加入带有图片URL的Markdown语句。例如，如果有一个网络上的图片地址`https://example.com/image.png`，那么可以通过下面的方式将其作为回复的一部分发出。 ```json { "message": "" } ``` 这种方式适用于那些可以直接访问互联网资源的情况[^2]。 #### 使用Base64编码上传本地文件 对于想要分享本地存储的图像，则需先将该图转换成base64字符串形式再传递给服务器端处理。之后同样利用上述提到的Markdown格式化方式呈现出来。具体操作流程可能涉及到前端JavaScript代码用于读取并转化文件为base64编码，而后端则负责接收这些数据并将它们正确解析回原始二进制流以便于浏览器渲染显示。 ```javascript function getBase64(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => resolve(reader.result); reader.onerror = error => reject(error); }); } // 假设fileInput是你HTML页面上用来选择文件<input type="file">元素的对象 getBase64(fileInput.files[0]).then(dataUrl => console.log(dataUrl)); ``` 一旦获得了base64编码后的字符串，就可以像之前那样把它放进JSON对象里并通过API接口提交到Dify平台上去。