[REACTJS] ReactJs 동적 경로에 기초하여 이미지로드

ReactJs 동적 경로에 기초하여 이미지로드

해결법

1. ---

   1.당신이 웹팩을 사용하고 있다고 가정하면,처럼 표시하기 위해 이미지를 가져와야

   당신이 웹팩을 사용하고 있다고 가정하면,처럼 표시하기 위해 이미지를 가져와야

   <img src={require('images/06.jpg')} alt="product" />
   

   이제 이미지 데이터는 동적입니다, 직접 같은 수입 경로를 지정

   <img src={require(image)} alt="product" />
   

   작동하지 않습니다.

   그러나 당신은 같은 템플릿 리터럴을 사용하여 이미지를 가져올 수 있습니다

   <img src={require(`${image}`)} alt="product" />
   

   코드는 다음과 같다 있도록

   render() {
       const { name, price, currency, image, url, isInCart } = this.props;
   
       return (
           <div className="product thumbnail">
               <img src={require(`${image}`)} alt="product" />
               <div className="caption">
                   <h3>
                       <a href={url}>{name}</a>
                   </h3>
                   <div className="product__price">{price} {currency}</div>
                   <div className="product__button-wrap">
                       <button
                           className={isInCart ? 'btn btn-danger' : 'btn btn-primary'}
                           onClick={this.handleClick}>
                           {isInCart ? 'Remove' : 'Add to cart'}
                       </button>
                   </div>
               </div>
           </div>
       );
   }
   

   추신 또한 이미지 경로가 당신이 그들을 가져올 파일을 기준으로 있는지 확인하십시오.

2. ---

   2.당신은 당신의 번들 응용 프로그램이 사는 곳 폴더에 그 이미지를 넣어해야합니다.

   당신은 당신의 번들 응용 프로그램이 사는 곳 폴더에 그 이미지를 넣어해야합니다.

from https://stackoverflow.com/questions/45334874/load-images-based-on-dynamic-path-in-reactjs by cc-by-sa and MIT license