警告：道具类型失败：提供给“图片”的道具“源”无效

Question

I have this warning in my project: "Warning: Failed prop type: Invalid prop source supplied to Image ". 我的项目中有以下警告：“警告：道具类型失败：提供给Image道具source无效”。 I'm loading an image from sampleProducts.json to Recommendend.js and pass it as props in Products.js, but the image won't load because of the warning. 我正在将图像从sampleProducts.json加载到Recommendend.js并将其作为props传递给Products.js，但是由于警告，该图像将无法加载。

sampleProducts.json sampleProducts.json

"recommended": {
    "product1": {
        "id": "1",
        "image": "require('../images/sample1.png')",
        "name": "Sample Product",
    },

Recommmended.js Recommmended.js

{Object.values(recommended).map(product => (
                    <Products
                        key={ product.id }
                        productImage={ product.image }
                        productName={ product.name }
                    />
                ))}

Products.js 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>

Answer 1

Get rid of the require() on recommended.product1.image and make it just "../images/sample1.jpg" 摆脱对recommended.product1.image的require()并将其变成“ ../images/sample1.jpg”

Change your Image component's source prop to be source={require(`${recommended.product1.image}`)} 将您的Image组件的源道具更改为source={require(`${recommended.product1.image}`)}

Answer 2

You cannot use require in JSON format and require not support dynamic path. 您不能使用JSON格式的require ，并且require不支持动态路径。

Can you use switch case statement instead ? 您可以改用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");
  }
}

and change JSON to 并将JSON更改为

"recommended": {
    "product1": {
        "id": "1",
        "image": "sample1.png",
        "name": "Sample Product",
    }
}

and use with component below 并与下面的组件一起使用

<Image source={getImage(productImage)} />

If you don't want to use switch case check this answers for other methods 如果您不想使用开关盒，请检查其他方法的答案

警告：道具类型失败：提供给“图片”的道具“源”无效

问题描述

2 个解决方案

解决方案1
0 2018-02-12 01:52:17

解决方案2
0 2018-02-12 02:57:18

警告：道具类型失败：提供给“图片”的道具“源”无效

问题描述

2 个解决方案

解决方案1 0 2018-02-12 01:52:17

解决方案2 0 2018-02-12 02:57:18

解决方案1
0 2018-02-12 01:52:17

解决方案2
0 2018-02-12 02:57:18