<Image> not displaying

[lastant]

I built a project using react-native-web some years ago, and displaying images from assets used to work out of the box: <Image source={require('../assets/icon-activities.png')} /> would translate to an inline background-image: url("data:image/png;base64,.... . This is very convenient.
Now that I updated to the latest version of react-native-web, the images are not displayed at all. I learned about react-native-web-image-loader, but seems it doesn't inline the image data. Is it still possible to inline the image data?

[necolas]

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

[lastant]

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

[lastant]

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,
    }
  }
};
...

[greenais]

@lastant, thanks, you saved my day!

[jkoutavas]

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

[RichardLindhout]

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.

[jkoutavas]

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.

[RichardLindhout]

Hmm, that's strange it should work, what if you use.

import AppLogoIcon from '/assets/images/AppLogoIcon.png

More here:
https://create-react-app.dev/docs/adding-images-fonts-and-files

create-react-native-web-application uses create-react-app in the background

[harshilJs]

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,
    }
  }
};
...

This saved my day and night too! Thank you very much 💯

[alessiocancian]

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

[gfaraj]

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>
    );
};

`