react-native-web: not displaying

Fixed it with the following webpack config (esModule parameter):

...
const imageLoaderConfiguration = {
  test: /\.(gif|jpe?g|png|svg)$/,
  use: {
    loader: "url-loader",
    options: {
      name: "[name].[ext]",
      esModule: false,
    }
  }
};
...

If you produce a test case I’ll reopen. The instructions on reporting issues are clear

I am having issues with images as well. Adding esModule: false definitely made some images show up for me now. But I haven’t figured out why the icons on the bottom tab navigation container don’t show up. Any ideas?

`

const Tab = createBottomTabNavigator();

export const HomeScreen = () => {
    useEffect(() => {
        trackScreen('Games');
    }, []);
    
    return (
        <Tab.Navigator
            screenOptions={({ route }) => ({
                tabBarIcon: ({ focused }) => {
                    let icon;
        
                    if (route.name === 'Games') {
                        icon = focused ? require('./img/nav/gamesIconColored.png') : require('./img/nav/gamesIcon.png');
                    } else if (route.name === 'Activity') {
                        icon = focused ? require('./img/nav/activityIconColored.png') : require('./img/nav/activityIcon.png');
                    } else if (route.name === 'Leaderboard') {
                        icon = focused ? require('./img/nav/leaderboardIconColored.png') : require('./img/nav/leaderboardIcon.png');
                    } else if (route.name === 'Prizes') {
                        icon = focused ? require('./img/nav/storeIconColored.png') : require('./img/nav/storeIcon.png');
                    } else if (route.name === 'Profile') {
                        icon = focused ? require('./img/nav/accountCircleColored.png') : require('./img/nav/accountCircle.png');
                    }
        
                    return <Image source={icon} width={wp(3)} height={wp(3)}/>;
                },
            })} 
            tabBarOptions={{
                showLabel: false,
                activeTintColor: 'rgb(153, 25, 255)',
                inactiveTintColor: 'rgb(80, 94, 118)',
            }}>
            <Tab.Screen name="Games" component={GamesScreen} />
            <Tab.Screen name="Activity" component={ActivityScreen} />
            <Tab.Screen name="Leaderboard" component={LeaderboardScreen} />
            <Tab.Screen name="Prizes" component={PrizesScreen} />
            <Tab.Screen name="Profile" component={ProfileScreen} />
        </Tab.Navigator>
    );
};

`

For the life of me, I can not get this to work.

I’m on react-native-web 0.14.10 having yesterday generated an app from scratch using npx create-react-native-web-application --name myappname. I went and edited the resultant config-overrides.js file and added the following:

  addWebpackModuleRule({
    test: /\.(gif|jpe?g|png|svg)$/,
    use: {
      loader: 'url-loader',
      options: {
        name: '[name].[ext]',
        esModule: false,
      }
    }
  })

My App.tsx contains this: <Image source={require('./assets/images/AppLogoIcon.png')} />

and I have the AppLogoIcon.png file at src/assets/images.

Everything builds fine for web (yarn run web), but the image does not appear. The image appears fine on iOS and Android, as you would expect.

Everywhere I look online, I see variations of the solution that @lastant gave, in articles and replies to questions but no joy here for me. Has something changed recently in react-native-web that breaks the ability to load static images? I searched all around github hoping to see a react-native-web example app that handles static images, and found nothing, which is surprising to me (I’m pretty decent at searching, heh.) Does this mean that people just generally are not using static images? What’s the best practice to share image loading code between mobile and web? I’d rather not have to conditionalize things and start using URIs for the web side, at least not for small images (< 1K).

Update: just on the off chance that create-react-native-web-application generator was producing a config problem, I simplified the creation process (and also used javascript instead of typescript). You can see the (failing) project here: https://github.com/jkoutavas/react-native-web-static-image

You don’t have to edit the config-overrides for the image to work (in create-react-native-web-application). But you should provide the width/height to the style. It’s required in React Native Web.

Don’t do any thing just dont use ‘require’ here use <Image source={logo} accessibilityLabel="React logo" resizeMode="contain" style={styles.logo} /> import logo from ‘./logo.png’;

Fixed it with the following webpack config (esModule parameter):

...
const imageLoaderConfiguration = {
  test: /\.(gif|jpe?g|png|svg)$/,
  use: {
    loader: "url-loader",
    options: {
      name: "[name].[ext]",
      esModule: false,
    }
  }
};
...

I had a similar configuration but without esModule: false, adding that line did the trick

You don’t have to edit the config-overrides for the image to work (in create-react-native-web-application). But you should provide the width/height to the style. It’s required in React Native Web.

Thank you for your prompt reply, @RichardLindhout .

Adding the width/height did in fact get the image to appear, and I needed to keep the url-loader in my simple project in order for it to work. You can see that change in this PR

Note: when I went back to visit my create-react-native-web-application, I DID still have to leave the url-loader in overrides for the image to appear.

I just firstly would like to know if this is expected behavior…