Amazon Lex如何在PHP网站（webhost000）上实现图片渲染输出？

核心实现逻辑 #

Amazon Lex本身不支持直接解析HTML标签渲染富文本，需要通过自定义负载（custom payload）约定前后端数据规则，由前端自行解析渲染图片元素，而非依赖Lex默认的响应解析逻辑。

Lambda侧返回响应的标准结构 #

以Node.js运行环境为例，Lambda返回给Lex的响应需要按照如下格式构造：

exports.handler = async (event) => {
    const response = {
        sessionAttributes: event.sessionAttributes,
        dialogAction: {
            type: "Close",
            fulfillmentState: "Fulfilled",
            message: {
                contentType: "CustomPayload",
                content: JSON.stringify({
                    // 自定义字段，和前端约定即可
                    type: "image",
                    imageUrl: "你的图片存储地址",
                    altText: "图片替代文本",
                    // 可以同时携带文本消息
                    text: "这是你要的展示图片："
                })
            }
        }
    };
    return response;
};

前端侧适配步骤 #

• 调用Lex Runtime API的PostText或PostContent接口获取机器人响应
• 解析响应数据，判断messages数组中是否存在contentType为CustomPayload的消息项
• 解析该消息项的content字段为JSON对象，若识别到type为image，则将对应内容渲染为<img>标签插入聊天窗口，普通文本内容直接展示即可

常见问题说明 #

• Lex默认会对纯文本响应中的HTML标签做转义处理，因此直接在文本中嵌入HTML标签无法生效
• CustomPayload的字段规则完全可以由前后端自行约定，不需要完全匹配官方文档的示例结构，自由度很高

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