プロップ名として反応コンポーネントに渡される画像を要求する方法はありますか？

Question

私は私の反応プロジェクトの一部であるローカルイメージの束を持っていると言います。私はより高いからの小道具を受け入れるコンポーネントを持っています - そして、小道具の1つはイメージ名です。それで、これを使うと動作します。私がwebpackを使用しているということは、私のイメージがなぜ表示されないのかということです。 私のコンポーネントを小道具を使用するように変換する前に、イメージ名はハードコードされていて、

 <img src={require('../images/products/image-aqua.png')}/> 

が、今、それは以下のように見える、とdoesntの仕事：基本的に

<img src={this.props.productImageUrl} /> 

が、私は画像の名前とWebPACKのパッキングの概念「オンザフライ」に反応stradleしようとしています（私はWebPACKのについて知っていますURLローダーとファイルローダー） ありがとう

Answer 1

あなたのウェブパックを投稿すると、さらに手伝ってください。上のコードは問題ありません。

ここではimgなどのウェブパックを使用していますが、使用しているときに機能します。

{ 
     test: /\.(jpg|jpeg|gif|png|tiff|svg)$/, 
     exclude: /\.glyph.svg/, 
     use: [ 
      { 
      loader: 'url-loader', 
      options: { 
       limit: 6000, 
       name: 'image/[name].[ext]', 
      }, 
      }, 
     ], 
     }, 

唯一の問題は、コンポーネントが読み込まれても画像が実際に読み込まれないことです。何かエラーが出ているのですか、まったく表示されていませんか？

class ProductList extends React.Component { 
    render() { 
     const product = Seed.products[0]; 
     return (
      <div className='ui unstackable items'> 
       <Product 
        id={product.id} 
        title={product.title} 
        description={product.description} 
        url={product.url} 
        votes={product.votes} 
        submitterAvatarUrl={`${product.submitterAvatarUrl}`} 
        productImageUrl={`${product.productImageUrl}`} 
       /> 
      </div> 
     ); 
    } 
} 

class Product extends React.Component { 
    render() { 
     console.log("image name " + `${this.props.productImageUrl}`); 

     return (
      <div className='item'> 
       <div className='image'> 
        <img src={`${this.props.productImageUrl}`} /> {/*this.props.productImageUrl*/} 
       </div> 
       <div className='middle aligned content'> 
        <div className='header'> 
         <a> 
          <i className='large caret up icon' /> 
         </a> 
         {this.props.votes} 
        </div> 
        <div className='description'> 
         <a href={this.props.url}> 
          {this.props.title} 
         </a> 
         <p> 
          {this.props.description} 
         </p> 
        </div> 
        <div className='extra'> 
         <span>Submitted by:</span> 
         <img 
          className='ui avatar image' 
          src={`${this.props.submitterAvatarUrl}`} 
         /> 
        </div> 
       </div> 
      </div> 
     ); 
    } 
} 

ReactDOM.render(
    <ProductList />, 
    document.getElementById('content') 
); 

...

import aqua from '../images/products/image-aqua.png'; 
import daniel from '../images/avatars/daniel.jpg'; 


export default window.Seed = (function() { 
    function generateVoteCount() { 
    return Math.floor((Math.random() * 50) + 15); 
    } 

    const products = [ 
    { 
     id: 1, 
     title: 'Yellow Pail', 
     description: 'On-demand sand castle construction expertise.', 
     url: '#', 
     votes: generateVoteCount(), 
     submitterAvatarUrl: daniel, 
     productImageUrl: aqua, 
    },