html - 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 of %

<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%' />