gpt4 book ai didi

javascript - 当源自 API 并映射到变量时,React 图像不会呈现

转载 作者:行者123 更新时间:2023-11-28 03:41:37 25 4
gpt4 key购买 nike

首先,感谢这个社区在过去几年中帮助我解决了数百个编码问题。值得庆幸的是,之前我已经在这里找到了几乎所有我需要的答案,而无需发布!

不幸的是,这个让我完全难住了。我正在 React Native 中编写一个新应用程序,在从 API 加载 JSON 响应后,将结果映射到变量然后渲染它后,我无法获取要渲染的图像。

我已通过将图像 URL 包含在 TextView 中来检查是否通过 JSON 响应和映射函数正确接收了图像 URL。我还确认它是“https”而不是“http”。

我尝试实现这些论坛上提到的多种方法来确保图像加载,但无论出于何种原因,我只获得文本字段而不是图像。图像容器在那里,但只是空的。当我将响应中的 URL 直接放入图像“uri”字段时,它工作正常。下面是有问题的代码片段,它没有显示任何错误,并且当我使用完整代码在 Snack 上运行它时可以正常工作。

function buildView (data){
var itemData = data.map((d) =>
<View style={{padding: 10}}>
<Image
source={{uri: '{d.galleryURL}'}}
key={d.itemID}
style={{width: 200 , height: 140}}
loadingIndicatorSource=<ActivityIndicator />
resizeMode={'contain'}
/>
<Text key={d.title}>Title: {d.title}</Text>
</View>
);
return(itemData);
}

if (this.state.isLoading!=true) {
var dataView = buildView(this.state.dataSource);
return(
<ScrollView
style={{ flex: 1}}
scrollEnabled={true}
showsVerticalScrollIndicator={true}
>
<View style={{ flex: 1, padding: 60 }}>
{dataView}
</View>
</ScrollView>
);
}

如果有人可以帮助确定我在代码中遗漏的内容,我将不胜感激。我唯一的怀疑是与它不重新渲染有关,但我目前不明白为什么。

最佳答案

'{d.galleryURL}' 实际上是一个字符串,其值等于 Javascript 中的 {d.galleryURL}。显然没有图像会显示该值。如果您的 galleryURL 正常工作,您应该能够通过以下方式显示它:

<Image
source={{uri: d.galleryURL}}
key={d.itemID}
style={{width: 200 , height: 140}}
loadingIndicatorSource=<ActivityIndicator />
resizeMode={'contain'}
/>

关于javascript - 当源自 API 并映射到变量时,React 图像不会呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57262716/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com