CODEWITHSUNDEEP
iosswiftimageuiimage
Flowne
Flowne

Reputation: 75

Image from URL doesn't follow the styling rules from storyboard

So I'm trying to display an Image from URL into a image (connected trough IBOutlet). However, the image does display but does not follow the styling rules set in the storyboard. Such as: Aspect Fill. This results in the image overlapping everything in the simulator.

Code:

let url = URL(string: "http://www.wsvh.nl/wp-content/uploads/bekergoud.jpg")

    DispatchQueue.global().async {
        let data = try? Data(contentsOf: url!) //make sure your image in this url does exist, otherwise unwrap in a if let check / try-catch
        DispatchQueue.main.async {
            self.nieuwsFeaturedImage.image = UIImage(data: data!)
        }
    }

Result: enter image description here

You can see that the image overlaps the title and description.

How do I fix this?

Upvotes: 0

Views: 43

Answers (1)

Mr. Hedgehog
Mr. Hedgehog

Reputation: 986

If you set aspect fill you'll also need to set nieuwsFeaturedImage.clipsToBounds = true or in Interface Builder check the Clips to Bounds box.

Without it your image is scaled with respect to ratio and thus it expands beyond the content area you've specified. You will need to truncate all of that extra content - Clips to Bounds is just for that.

enter image description here

Upvotes: 2

Related Questions