React Native Image 未从 android 上的本地地址呈现

Question

我正在学习并做一个关于 react-native 的项目。我在尝试从本地服务器渲染图像时遇到问题。我想出了渲染图像的方法，我面临的问题是来自本地服务器的图像没有在我的应用程序中渲染。我在源代码中添加到 uri 的链接在浏览器中显示图像，但未在应用程序中呈现。我不知道我哪里错了

我已经尝试检查链接是否有效，我使用占位符图像来检查 Image 是否正常工作（它是）。

 <Image source={{uri: 'http://10.0.2.2:8000/packageImages/asd1.jpg'}}
                       style={{width: 400, height: 400}} />

我希望图像可以渲染，但它没有渲染，也没有抛出任何错误。

Answer 1

如果您确实希望将 IP 分配给您的模拟器：

adb shell
ifconfig eth0

这会给你类似的东西：

eth0: ip 10.0.2.15 mask 255.255.255.0 flags [up broadcast running multicast]

How to get the Android Emulator's IP address?

Answer 2

有时我无法在没有 SSL 加密的情况下渲染图像，您可以尝试使用来自互联网的一些图像吗？ 您也可以尝试这种方法来检查您的图像中是否存在某种错误：

class CustomImage extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            source: this.props.source
        }
    }



    shouldComponentUpdate(prevProps, prevState) {
        if (this.state.source !== prevState.source) return true

        return false
    }

    handleImageError = (error) => {

        if (this.props.semImagem) {
            this.setState({
                source: this.props.semImagem
            })
        } else {
            this.setState({
                source: resources.images.livroSemCapa
            })
        }

    }

    render() {

        let theSource = this.state.source

        if (this.state.source ?.uri === null || this.state.source ?.uri ?.trim() === "") {

            theSource = this.props.semImagem ? this.props.semImagem : resources.images.livroSemCapa
        }


        return (
            <Image
                onError={({ nativeEvent: { error } }) => this.handleImageError(error)}
                source={theSource}
                style={this.props.style}
                resizeMode={this.props.resizeMode || 'contain'}
            />
        )
    }
}