Question

我正在从JSON中选择图像，并希望在lazyimageload

中加载它

renderRow = (file) => {
  var imageURL = require(file.image_url);
    return <View
        style={styles.view}>
        <LazyloadView
            host="listExample"
            style={styles.file}>
             <LazyloadImage
                    host="listExample"
                    style={styles.image}
                    source={imageURL}
                    animation={false}/>
            <View style={styles.detail}>
                <Text style={styles.name}>{file.first_name} {file.last_name}</Text>
                <Text><Text style={styles.title}>email: </Text><Text style={styles.email}>{file.email}</Text></Text>
                <Text style={styles.ip}><Text style={styles.title}>last visit ip: </Text>{file.ip_address}</Text>
            </View>
            <View style={styles.gender}>
                <Text style={[styles.genderText, file.gender === 'Male' ? styles.male : styles.female]}>{file.gender}</Text>
            </View>
        </LazyloadView>
    </View>;
};

但是获得例外＆＃34;需要未知模块＆＃34; ./ images / image.png＆＃39;。如果你确定该模块在那里尝试重新启动打包器或运行npm install。任何人都可以请帮助

Answer 1

您无法使用require动态提取本地图像。原因是当打包者遇到require时，它会尝试将该文件与您的应用捆绑在一起。如果路径是动态的，它不能捆绑图像。要加载动态图像，您需要将其从网络中提取出来，或者如果您有一组特定的图像可能最终被使用，则每个图像都可以require，然后使用require的输出取决于传入的信息。

const image1 = require('./image1.png');
const image2 = require('./image2.png');
{...}
render() {
    return (
        <Image source={aRandomBool ? image1 : image2} />
    );
}

参考：https://facebook.github.io/react-native/docs/images.html#static-image-resources

延迟加载动态图像图像

1 个答案: