Swift：在标签中显示 HTML 数据不显示正确的图像

Question

Swift：在标签中显示 HTML 数据不显示正确的图像

有什么解决办法吗？

提前谢谢，任何帮助表示赞赏。

到目前为止，我正在尝试通过以下方式使用 NSAttributedString，但这样，整个 HTML 显示正确，但图像比例不正确：

使用以下代码：

extension NSAttributedString {
internal convenience init?(html: String) {

    let modifiedFont = String(format:"%@", html)

    guard let data = modifiedFont.data(using: String.Encoding.utf16, allowLossyConversion: false) else {
        // not sure which is more reliable: String.Encoding.utf16 or String.Encoding.unicode
        return nil
    }
    guard let attributedString = try? NSMutableAttributedString(data: data, options: [NSAttributedString.DocumentReadingOptionKey.documentType: NSAttributedString.DocumentType.html], documentAttributes: nil) else {
        return nil
    }

    self.init(attributedString: attributedString)
}

}

从服务器获取下面的 HTML 来显示：

<h3><span style="color: #42a48e;">Description</span></h3>
<ul>
<li>Fully tool-less disconnection module with 45&deg; LSA contacts for connecting plastic-insulated copper conductors.</li>
<li>Silicone gel encapsulation gives excellent environmental protection, even in scenarios where the outdoor cabinet is subjected to flooding.</li>
<li>Complete range of accessories makes this an essential part of any FTTN architecture.</li>
</ul>
<h3><span style="color: #42a48e;">Installation Steps:</span></h3>
<ol>
<li>Hold the closed slider with two fingers and then pull the slider fully out until you feel and hear a "click"-sound.</li>
<li>Preparing the wire for installation: When cutting the wire make sure that the cutter is kept straight and don&lsquo;t bend the wire in any direction.</li>
<li>Insert the wire into the highlighted holes until the wire touched the bottom of the connector (about 8-10mm).</li>
<li>Insert the wire fully. Then keep holding/ guiding the wire in position while closing the slider with the second hand.</li>
<li>The slider is closed when you can hear a "click"-sound. Now the wire can be released.</li>
</ol>
<p><img style="max-width: 100%;" src="https://i.imgur.com/EFdLNOc.png" alt="LSA-TL Install Steps" width="100%" height="100%" /></p>

Answer 1

您可以通过使用特定的图像样式max-width和max-height来解决此问题，请参阅以下代码和图像。

注意：指定图片max-width和max-height insted %

<img style='max-width: \(self.view.frame.width - 50)px; max-height: \(self.view.frame.width - 50)px;' src='https://i.imgur.com/EFdLNOc.png' alt='LSA-TL Install Steps' width='100%' height='100%' />