2017-12-31 112 views
0

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

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

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

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

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

答えて

1

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

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

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

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

enter image description here

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, 
    }, 
+0

画像はちょうど示すアレント - 私は、彼らがすることになっている空の長方形を取得しています。どこか間違った経路があるかどうかを調べようとしています – alernerdev

+0

this.props.productImageUrlを使用している場所でconsole.logを正確に確認しましたか? (上の1行のように)そして、イメージデータが準備される前にコンポーネントが最初にレンダリングされるのは非同期の問題ではないことは間違いありませんか? –

+0

問題は私が初心者で、私がやっていることを知らないということです。私はシンプルなサンプルプロジェクトに取り組んでいます。それは間違ったパスやそれに相当するものを指定するのと同じように、「方法」の純粋な欠如です。 – alernerdev

関連する問題