display server generated image in PWA using JavaScript in iOS

Question

Facing issue in PWA. I am trying to display image in WKWebview in iOS using HTML, Javascript.

Example: I have added below file in xCode project and configuring with WKWebview.

in .html

<img id="myimage" onclick="changeImage()" src="http://res.cloudinary.com/klipfolio/image/upload/v1500283193/pic_bulboff_to4zaq.png"  height="180">
    <p>Click the lightbulb to turn on/off the light</p>

in .js file (JavaScript)

window.changeImage = function() {
    element=document.getElementById('myimage');
    if (element.src.match("bulbon")) {
        element.src="http://res.cloudinary.com/klipfolio/image/upload/v1500283193/pic_bulboff_to4zaq.png";
    }
    else { element.src="http://res.cloudinary.com/klipfolio/image/upload/v1500283189/pic_bulbon_tvpcg5.png";
    }
}

But, not displaying image in Webview. showing white box only..

Thanks in advance!

I suspect HTTP is not allowed in your info.plist. you might want to try it with HTTPS as the cloudinary.com has a valid https certificate — Sahil Manchanda
– Sahil Manchanda, Commented Aug 20, 2019 at 5:42
Try loading WKWebView with following url jsfiddle.net/Lz9go1q0/1 — Sahil Manchanda
– Sahil Manchanda, Commented Aug 20, 2019 at 5:46
@SahilManchandaThanks Sahil. After using https also it is not working in WKWebview — Ruchira More
– Ruchira More, Commented Aug 20, 2019 at 5:50
@SahilManchanda I'm not able to update the image on click event — Ruchira More
– Ruchira More, Commented Aug 20, 2019 at 5:56

Sahil Manchanda · Accepted Answer · 2019-08-20 06:14:38Z

0

The issue is related to HTTP resources. By default HTTP is disabled. There are two ways you can make it work.

A) By enabling HTTP (Discouraged)

B) By using a valid SSL

Since the image resource already has a valid SSL certificate, changing from HTTP to HTTPS will do the trick.

answered Aug 20, 2019 at 6:14

Sahil Manchanda

10.6k4 gold badges42 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

display server generated image in PWA using JavaScript in iOS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related