反应原生 - 图像未正确显示

Posted 2023-03-07

【中文标题】反应原生 - 图像未正确显示

【英文标题】：react native - image not showing properly

【发布时间】：2018-06-22 10:11:25

【问题描述】：

我正在使用普通图像标签来显示服务器图像，但有些图像可以正常显示，有些则不能。

我将 react-native 用于 android 应用程序 我使用 react-native-responsive-dimensions 来调整图像大小 相对于屏幕尺寸。 通过状态传递图像 URL。

<View>
   <Image 
     style=borderWidth:1,
     width: responsiveWidth(100),
     height: responsiveHeight(50),
     resizeMode:'contain' 
     source =  uri:this.state.productimage/>
</View>

【问题讨论】：

远程图片的宽度和高度需要提供。

可以分享一下代码吗？以便我们能够了解您使用了多少张图片，以及我们可以知道哪个平台复制了哪个问题（即 android 或 ios）？

borderWidth 导致了这个问题。从图像标签图像的 CSS 中删除borderWidth 后，图像正确显示。抱歉，感谢您的帮助。

【参考方案1】：

如果您想在网格中显示您的服务器图像，那么这可能适合您

<Image source=uri:"http://pngimg.com/uploads/google/google_PNG19632.png" style=height:null,width:null,flex:0.5,resizeMode:'contain'  />

或更改 resizeMode:'cover'

【讨论】：

resizeMode:'contain' 救了我:)

【参考方案2】：

提供图片标签样式的高宽

<Image 
source =  uri:"http://pngimg.com/uploads/google/google_PNG19632.png"  
style =  height:100, width:100 />

【讨论】：

我的图片显示但不正确。