react-native-webview: Image in webview on Android not shown

I am using a webview to display custom html taken from Cloud FireStore. In some cases there is an image in that html. On iOS the image shows, but on Android the image is not shown. I just get the alt text.

This is the image tag inside the html: <img src="https://firebasestorage.googleapis.com/v0/b/sjaloom-connect.appspot.com/o/images%2Fdcf8ab78-e98f-46db-bdae-eab7b18ded1a.jpg?alt=media&token=e654671a-4320-464a-b1fd-7236170d48f7" alt="undefined" style="float:none;height: 100px;width: 120px"/>

Is this a bug in webview or is there a setting I miss.

React Native Environment Info: System: OS: macOS High Sierra 10.13.6 CPU: x64 Intel® Core™ i7-7820HQ CPU @ 2.90GHz Memory: 24.10 MB / 16.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 11.0.0 - /usr/local/bin/node npm: 6.4.1 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: Android SDK: Build Tools: 27.0.3, 28.0.2, 28.0.3 API Levels: 19, 21, 22, 23, 24, 25, 26, 27, 28 IDEs: Android Studio: 3.2 AI-181.5540.7.32.5056338 Xcode: /undefined - /usr/bin/xcodebuild npmPackages: react: 16.6.0-alpha.8af6728 => 16.6.0-alpha.8af6728 react-native: 0.57.4 => 0.57.4 npmGlobalPackages: react-native-cli: 2.0.1 react-native-git-upgrade: 0.2.7

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 44 (2 by maintainers)

Most upvoted comments

try this

mixedContentMode=“compatibility”

+21

gaohan1994 on May 24, 2019

was this ever fixed? am facing same issue

<WebView
          style={{
            width: material.sliderWidth,
            minHeight: 200,
            height: 200,
            marginBottom: 10
          }}
          source={{
            html: `<!doctype html>
          <html lang="en">
            <head>
              <meta charset="utf-8">
              <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
              
              <title>image</title>
            </head>
            <body>
            <img src='${space.images[0].url}' style="width:200px;height:100%px;"/>
            </body></html>`
          }}
          originWhitelist={['*']}
          allowUniversalAccessFromFileURLs
          javaScriptEnabled
          domStorageEnabled
          startInLoadingState
        />

works on iOS, but not on android

Danelund on Jul 24, 2019

try this

mixedContentMode=“compatibility”

I tried this and it worked on the emulator but when created an Apk and ran it on the real device the issue was same. No images got loaded and showing alternative name or empty image boxes.

geragt280 on Feb 4, 2022

@jamonholmgren I will try to provide it this week.

udarts on Nov 13, 2018

@phuwin95 It was in a native project. Sorry but I don’t know how to fix it in React Native. Take a look in this PR, maybe it can be useful: https://github.com/react-native-community/react-native-webview/pull/1450#issue-432207455 …

I found this property, try it: ignoreSslError={true} Ex: <WebView ignoreSslError={true} source={{uri: ‘https://www.google.com’}} />

lmint1 on Sep 2, 2020

I had a similar issue, and I think that was some issue with the certificate. And that worked for me:

webView.webViewClient = object : WebViewClient() {              
    //Intercepts SslError and proceed
    override fun onReceivedSslError(view: WebView?, handler: SslErrorHandler?, error: SslError?) {
        //try to print SslError to find out what's happening
        println(error)
        handler?.proceed()                                                                        
    }                                                                                             
}

lmint1 on Jul 12, 2020

Already have that set to true, no difference.

udarts on Jan 8, 2019