React 이미지가 작동하지 않음

Question

이것이 React에서이 작업을 수행하는 가장 좋은 방법인지 확실하지 않습니다.

<Image image={item.product.image}/> 

:

import React from 'react'; 

const component = ({image}) => (
    <img src={image} /> 
) 

export default component; 

내가 그것을 사용할 때 내가이 통과 : 더 나은 방법이나 어떻게 간단한 이미지 구성 요소가이 작품을

을 만드는 방법이 있다면 누군가가 코멘트 할 수하시기 바랍니다

그것은과 같이 객체에 살고 :

{ 
    name: 'Rucksack', 
    price: '15.00', 
    salePrice: '7.00', 
    id: 1, 
    image: '/data/rucksack.jpg' 
    }, 

하지만 난 그것을 실행할 때 나는 작은 녹색 메신저를 얻을 수 나이 오류 및 콘솔 말합니다 : http://localhost:8080/data/rucksack.jpg 404 (Not Found)

아무것도 나 잘하고 있지?

Answer 1

webpack에서 작동하게하려면 require를 사용해야합니다.

당신은 당신의 이미지 구성 요소를 변경해야하고, 경로가 지금 상대 할 필요가 :

import React from 'react'; 

const component = ({image}) => (
    <img src={require(image)} /> 
) 

export default component; 

당신은 또한 상대 경로를 확인해야합니다 (아마 당신은 그것을 적용 할 필요) :

{ 
    name: 'Rucksack', 
    price: '15.00', 
    salePrice: '7.00', 
    id: 1, 
    image: '../data/rucksack.jpg' 
    }, 

Answer 2

이미지 URL에 문제가있는 것 같습니다. 이미지를 찾을 수 없기 때문에 서버는 404 공명을 반환합니다. 이미지 URL이 작동하는지 확인하십시오.

http://localhost:8080/data/rucksack.jpg으로 이미지에 액세스 할 수 있어야합니다. 말린 명령이나 브라우저를 사용하여 확인하십시오.