>

프로젝트에 다음 경고가 표시됩니다. "경고 : 소품 유형 실패 : 잘못된 소품 source   Image 에 공급 ". 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>

  • 답변 # 1

    require() 를 제거   recommended.product1.image 에서  "../ images/sample1.jpg"

    와이즈 비즈 변경  구성 요소의 소스 소품 와이즈 비즈

  • 답변 # 2

    JSON 형식의필수를 사용할 수 없으며 동적 경로를 지원하지 않는필요입니다.

    대소 문자 전환 문을 사용할 수 있습니까?

    Image
    
    

    JSON으로 변경

    source={require(`${recommended.product1.image}`)}
    
    

    아래 컴포넌트와 함께 사용

    function getImage(img_name) {
      switch(img_name) {
        case "sample1.png": return require("../images/sample1.png");
        case "sample2.png": return require("../images/sample2.png");
      }
    }
    
    

    스위치 케이스를 사용하지 않으려면 다른 방법으로이 답변을 확인하십시오

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

관련 자료

  • 이전 python - 3 개의 데이터 프레임을 결합하는 데 문제가 있습니다파이 스파크
  • 다음 mysql - 데이터를 나누기위한 쿼리