PyQt5中QTextBrowser实现缩略图点击查看原图的功能问询

原有方案失效的核心原因 #

QTextBrowser 基于 Qt 原生富文本引擎（QTextDocument）渲染内容，不内置 JavaScript 解析执行能力，因此直接在<img>标签中写入onclick、window.open这类前端交互代码完全不会被触发。
除此之外原代码本身还存在HTML语法错误：onclick属性值内部直接嵌套双引号没有转义，就算放到支持JS的Web环境中，这段代码也会因为语法错误无法执行。两个因素叠加导致原方案完全达不到预期效果。

可行实现路径 #

核心逻辑是借助QTextBrowser原生提供的anchorClicked信号拦截链接点击行为，替代JS完成自定义交互，不需要额外加载Web引擎组件。

1. 替换HTML标签写法 #

放弃在<img>上绑定onclick的写法，把缩略图嵌套在携带自定义协议的<a>标签内部，用自定义协议标记需要触发图片预览的链接，避免和正常业务链接混淆。
调整后的标签生成代码示例：

for sub in sub_list:
    # 自定义preview-img协议作为图片预览的标识，链接值携带原图路径
    img_item = f'<a href="preview-img://pic/serv_pics/{sub}"><img src="pic/thumbnails/thumb_{sub}"></a>'
    attachment_list.append(img_item)

注意：QTextBrowser识别到<a>标签时会自动将鼠标切换为手型，不需要额外写CSS模拟可点击效果。

2. 配置QTextBrowser基础属性 #

禁用组件默认的链接打开行为，让所有链接点击事件都由自定义逻辑接管：

# 初始化QTextBrowser时的配置
text_browser.setOpenLinks(False)  # 完全关闭内置的链接打开逻辑
text_browser.setOpenExternalLinks(False)  # 禁止点击链接自动唤起系统外部程序
# 绑定anchorClicked信号到自定义处理函数
text_browser.anchorClicked.connect(self.handle_link_click)

3. 实现点击拦截的自定义逻辑 #

在绑定的槽函数中识别自定义协议，执行对应的图片预览逻辑，其余类型的链接可以按业务需求走对应处理分支：

def handle_link_click(self, url):
    # 识别自定义图片预览协议
    if url.scheme() == "preview-img":
        # 提取原图路径，执行自定义预览逻辑（比如弹出QDialog展示原图、做缩放/保存功能）
        original_path = url.path()
        self.trigger_image_preview(original_path)
        return
    # 其余类型的链接可按需扩展处理分支，比如本地文件打开、内部页面跳转

常见踩坑提示 #

• 不要为了实现JS交互在QTextBrowser场景下替换为QWebEngineView，会带来不必要的性能损耗，原生富文本的信号拦截机制完全可以满足缩略图点击预览的需求
• 图片的相对路径需要和QTextBrowser的基础路径配置匹配，否则会出现缩略图加载失败的问题
• 自定义协议的命名要避开Qt内置的http/https/file/qt这类保留协议头，避免和系统内置的链接处理逻辑冲突

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