SwiftUI中如何在Markdown链接标签内嵌入可点击图片？

SwiftUI的原生Markdown语法不支持直接在链接标签中嵌入图片，所以需要借助AttributedString来实现文本+图标内联且可点击的链接，同时保证能和其他Text视图拼接。

核心思路 #

通过NSTextAttachment将SF Symbol图标嵌入富文本，再给整个文本+图标范围添加链接属性，最后转换成SwiftUI可识别的AttributedString，即可实现需求。

完整代码实现 #

import SwiftUI
import UIKit

struct Paragraph: Identifiable {
    let id = UUID()
    let text: String
    let url: String
}

struct ParagraphView: View {
    let paragraph: Paragraph
    
    var body: some View {
        // 先校验URL有效性
        if let url = URL(string: paragraph.url) {
            Text(paragraph.text)
            + Text(sourceLinkAttributedString(url: url))
        } else {
            Text(paragraph.text)
        }
    }
    
    private func sourceLinkAttributedString(url: URL) -> AttributedString {
        // 初始化链接文本
        var attributedString = AttributedString(" Source ")
        
        // 添加SF Symbol图标作为文本附件
        if let uiImage = UIImage(systemName: "star")?.withRenderingMode(.alwaysOriginal) {
            let attachment = NSTextAttachment()
            attachment.image = uiImage
            
            // 调整图标垂直位置，匹配文本高度
            let font = UIFont.preferredFont(forTextStyle: .body)
            attachment.bounds = CGRect(
                x: 0,
                y: (font.capHeight - uiImage.size.height) / 2,
                width: uiImage.size.width,
                height: uiImage.size.height
            )
            
            // 将附件转为AttributedString并追加
            let attachmentString = NSAttributedString(attachment: attachment)
            attributedString.append(AttributedString(attachmentString))
        }
        
        // 给整个文本+图标范围设置链接属性
        attributedString.link = url
        
        return attributedString
    }
}

关键说明 #

1. 为什么之前的方法失效：你之前尝试将带NSTextAttachment的NSMutableAttributedString转成普通字符串，会丢失附件信息——普通字符串无法存储图片这类富文本元素，只有AttributedString才能保留这些属性。
2. 图标对齐处理：通过调整NSTextAttachment的bounds，让图标和文本的基线对齐，避免出现上下偏移的问题。
3. 全范围链接：给整个包含文本和图标的AttributedString设置link属性，确保点击文本或图标都能触发跳转。
4. 拼接兼容性：SwiftUI的Text支持直接拼接AttributedString类型的Text，所以可以用+号将链接部分追加到段落文本末尾。

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