display server generated image in PWA using JavaScript in iOS

问题

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!

回答1:

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.

来源：https://stackoverflow.com/questions/57551779/display-server-generated-image-in-pwa-using-javascript-in-ios