react-native-web-image-loader icon indicating copy to clipboard operation
react-native-web-image-loader copied to clipboard

Images are not showing for me

Open gfaraj opened this issue 4 years ago • 2 comments

Hi there, I'm trying this library but it's not working for me yet. Here's my webpack.config.js:

https://gist.github.com/gfaraj/7dd79873efeb4dac6776117b1cbd5165

When I build the web app, I see the images in the static/media folder but they don't get loaded. Here's an example:

            <View style={styles.pointsContainer}>
                <Image 
                    source={require('./img/tickerHeader.png')}
                    style={{width: wp(4), height: wp(4), resizeMode: 'contain'}} />
                <Text style={styles.points}>{user.points.toLocaleString(undefined, { maximumFractionDigits: 0 })}</Text>
            </View>

and the static/media folder contains the scaled images:

image

I see references to these files in the bundle file:

image

The web site doesn't seem to have any image tags or any of those image files referenced anywhere in the CSS. Any ideas?

gfaraj avatar Sep 27 '21 02:09 gfaraj

Try this configuration (adding esModule = false)...

{
  test: /\.(png|jpe?g|gif)$/,
  options: {
    name: 'static/media/[name].[hash:8].[ext]',
    esModule: false,
    scalings: { '@2x': 2, '@3x': 3 },
  },
  loader: 'react-native-web-image-loader',
};

MorganTrudeau avatar Nov 03 '21 23:11 MorganTrudeau