CODEWITHSUNDEEP
react-native
Thái Văn Nguyễn
Thái Văn Nguyễn

Reputation: 1

Webview don't display image in react-native

This is my code and it can't display image.

<WebView
   source={{html: `<img src='//i.pinimg.com/564x/41/76/2e/41762e489565279690334d5d38815b0f.jpg'>` }}
   style={{flex: 1}}
   javaScriptEnabled={true}
>
</WebView>

But I change src='https://i.pinimg.com/564x/41/76/2e/41762e489565279690334d5d38815b0f.jpg' and it work. Why? Please help me

Upvotes: 0

Views: 4973

Answers (1)

soutot
soutot

Reputation: 3671

The problem is because you are trying to load a non https url by using // in your WebView, which is not allowed by default. If you open it as https the code you provide will work.

If you want to load a non https url in your webview, you should first allow the domain in your info.plist in xcode (more details here: non-https sites in webview in RN)

Also, I would like to point that you can use <Image> component instead of <WebView> if you just want to render an image.

Hope it helps.

Upvotes: 1

Related Questions