javascript - 从 API 获取并映射到变量时反应图像不呈现
问题描述
首先,感谢这个社区在过去几年帮助我解决了数百个编码问题。值得庆幸的是,在此之前,我几乎已经在这里找到了我需要的所有答案,而无需发布!
不幸的是,这个让我完全被难住了。我正在用 React Native 编写一个新应用程序,在从 API 加载 JSON 响应后,在将结果映射到变量然后渲染它之后,我无法获取要渲染的图像。
我已经通过将图像 URL 包含在文本视图中来检查图像 URL 是否通过 JSON 响应和映射函数正确接收。我还确认它是“https”而不是“http”。
我尝试实现这些论坛上提到的许多方法以确保加载图像,但无论出于何种原因,我只得到文本字段而不是图像。Image 容器在那里,但只是空的。当我将响应中的 URL 直接放入 Image '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'}
/>
推荐阅读
- c++ - 从迭代器构造 const_iterator
- github - 来自 Gatsby 中 github api 的 Graphql 查询数据
- c++ - 这里的派生类指针是否可能存在生命周期问题?
- python - 在 python 中这个练习的正确正则表达式是什么?
- html - 使元素居中并放大它?
- spring-boot - XMLGregorianCalendar 在使用 GSON 时正在更改格式
- python - 如何在 django 中将字符串作为输入?
- reactjs - 如何让 SwitchTranition 与带有 TypeScript 的 CSSTransition 一起使用
- excel - 如何对每 n 行中的单元格求和,用于 3 组值
- python - 简单的 python 舞台游戏问题(没有 graphyx)