警告: prop type失败:提供给`Image`的prop `source`无效
警告: prop type失败:提供给`Image`的prop `source`无效
提问于 2018-02-12 09:35:01
我的项目中有这样的警告：“警告:失败的属性类型:提供给Image的属性source无效”。我正在从sampleProducts.json加载一个图像到Recommendend.js，并在Products.js中将其作为道具传递，但由于警告，图像不会加载。
sampleProducts.json
"recommended": {
"product1": {
"id": "1",
"image": "require('../images/sample1.png')",
"name": "Sample Product",
},Recommmended.js
{Object.values(recommended).map(product => (
<Products
key={ product.id }
productImage={ product.image }
productName={ product.name }
/>
))}Products.js
<Card style={ styles.card }>
<CardItem>
<Image style={ styles.productImage } source={ productImage} resizeMode='contain' />
</CardItem>
<CardItem>
<Body>
<Text style={ styles.productName }>{productName}</Text>
</Body>
</CardItem>
</Card>回答 2
Stack Overflow用户
发布于 2018-02-12 09:52:17
去掉recommended.product1.image上的图像并将其设置为“../ require() /sample1.jpg”
将Image组件的源代码属性更改为source={require(`${recommended.product1.image}`)}
Stack Overflow用户
发布于 2018-02-12 10:57:19
您不能使用要求JSON格式，以及要求不支持动态路径。
你能用switch case语句来代替吗？
function getImage(img_name) {
switch(img_name) {
case "sample1.png": return require("../images/sample1.png");
case "sample2.png": return require("../images/sample2.png");
}
}并将JSON更改为
"recommended": {
"product1": {
"id": "1",
"image": "sample1.png",
"name": "Sample Product",
}
}并与下面的组件一起使用
<Image source={getImage(productImage)} />如果您不想使用switch case，请检查此answers中是否有其他方法
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48738412
复制相关文章
相似问题
腾讯云开发者
