CODEWITHSUNDEEP
htmliosswiftuilabelswift4.2
Ashish
Ashish

Reputation: 3137

Swift: Display HTML data in a label not display proper image

Swift: Display HTML data in a label not display the proper image

Is there any solution?

Thnx in advance, Any help is appreciated.

Till now I am trying by using an NSAttributedString in following way but in this way, the whole HTML display proper but image scale not proper :

Used below code:

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)
}

}

enter image description here

From sever get below HTML to display:

<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>

Upvotes: 3

Views: 1175

Answers (1)

AtulParmar
AtulParmar

Reputation: 4570

You can solve this issue by using specific max-width and max-height of image style, See the following code and image for this.

Note: specify an image max-width and max-height in px 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%' />

enter image description here enter image description here

Upvotes: 1

Related Questions