私のイメージはこれが私のアプリケーションのコンポーネントであるReactJS

Question

に示されていない、それは出力を持っていないイメージを持って、私はsrcが正しいと思う、私のファイルツリーは次のとおりです。

1. アプリケーション：
2. SRC： 3.1画像3.2 bull.jpg 3.2 utilsの3.3 Carta.js

import React, {Component} from 'react'; 
import './Carta.css' 
import FlipCard from 'react-flipcard'; 


export default class Carta extends Component{ 
    render(){ 
     return(
      <div className="carta" onClick={this.props.seleccionarCarta}> 
       <FlipCard 
        flipped={this.props.estaSiendoComparada || this.props.fueAdivinada} 
        disabled={true} 
        > 
        <div className="portada"></div> 
        <div className="contenido"> 
         <ul>  
          <li><img src={"images/toro.jpg"} alt={''} /></li> 
         </ul> 
        </div> 

       </FlipCard> 

      </div> 
     ) 
    } 
} 

Answer 1

問題は、おそらく不正なパスによるものである：3210このコードは、画像を持っているCarta.jsからです。これは、src構造がwebpackによって生成された構造であるビルド構造と異なる場合があるためです。

イメージをインポートすると、バンドルに余分な負荷がかかることがありますが、正しいパスを指定すると、doing this will ensure that webpack move the images into the build folderとなります。

イメージがCarta.jsと同じフォルダにある場合、srcの先頭に./が必要です。できれば

import MyImage from './images/toro.jpg' 

// ...rest of your code 

<img src={MyImage} />