How to use baseURL in react-native-webview?

Question

I can't get the baseUrl parameter to work in react-native-webview. My project structure is as follows:

root  
---> _tests _  
---> android  
-------> web  
---> ios  
---> node_modules  
---> src  
-------> components  
------------> web  
------------> MyComponent.js  
---> web

I have inserted the web folder 3 times as shown (actually only need to once, this is just for testing). Each 'web' folder contains ponies.jpg. However, nothing is picked up by React Native. I just get 4 broken images with the alt (i.e. 'Ponies') showing. I have also tried using baseUrl: 'web/' to no avail. Here is the code in MyComponent.js:

import React from 'react';
import {View, Text, StyleSheet, Image} from "react-native";
import {WebView} from "react-native-webview";

var html = `
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img src="ponies.jpg" alt="Ponies" height="42" width="42">
    <img src="ponies.jpeg" alt="Ponies" height="42" width="42">
    <img src="./ponies.jpg" alt="Ponies" height="42" width="42">
    <img src="./ponies.jpeg" alt="Ponies" height="42" width="42">
</body>
</html>
`;

export default class MyComponent extends React.Component {

    render() {
        return (
            <View style = {styles.container}>
                <WebView
                    style = {styles.webview}
                    source = {{html: html, baseUrl: 'web/'}}
                />
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        height: 350,
        width: 350
    },
    webview: {
        height: 350,
    }
})

Thankyou!

score 2 · Answer 1 · answered Feb 13 '19 at 10:09

2

OK so I found a solution/workaround for android :D Have actually seen this in another answer but am going to expand a little:

baseUrl needs to be 'file:///android_asset/'.
You then create a directory in the android folder i.e. 'root/android/app/src/main/assets' (see this answer for details how to reference an asset in a library project).
These two folders are now the same. anything you put in assets should be seen by the webview.
IMPORTANT - I then had to rerun 'react-native run-android' to get the image to show up.

answered Feb 13 '19 at 10:09

Chris Sherriff

353
5
10

Any idea how to do the same thing for ios? – Adrian Moisa Feb 01 '20 at 13:37
Afraid not Adrian I haven't looked at this since! Good luck with finding a solution – Chris Sherriff Feb 02 '20 at 22:06

score 0 · Answer 2 · answered Feb 12 '19 at 18:08

0

Currently, your web folder is inside the android folder

Add a folder web and used this structure:

app/web/ponies.jpg

Use web/ as base URL.

The final piece of the puzzle is to add the web folder to the XCode project (do this in XCode). Otherwise, the files in the web folder are not included in the bundle built for the ios device.

Note: where app is the root of the application.

answered Feb 12 '19 at 18:08

Piyush Zalani

3,686
1
13
29

Hi Piyush this didn't work unfortunately! I have a file here: 'root/web/ponies.jpg'. I also have 'web/' as the baseUrl. However nothing shows up still on Android. Do I need to put anything inside the Android directory for this to work? I haven't tried ios yet. – Chris Sherriff Feb 13 '19 at 09:51
wouldn't it make more sense to store the files in the `DocumentDirectoryPath`? I'm struggling with this too: https://stackoverflow.com/questions/60371739/webview-refuses-to-display-images – ekkis Feb 24 '20 at 23:07

How to use baseURL in react-native-webview?

2 Answers2