リアクタのイメージのスタイルがローカルイメージと連携していません

Question

私は今日の反応を調べ始めました。私のコンポーネントの機能をレンダリングするには、次のように画像の属性は、画像へのURLです私は（Nattklunnが間違ったスペルを目的としている）、配列を指定している：

const songs = [{'title' : 'Nattklubb', 
        'author' : 'DigohD', 
        'image' : 'img/Nattklunn.png'}, 

        {'title' : 'LED Beluga', 
        'author' : 'DigohD', 
        'image' : 'img/LED Beluga.png'}, 

        {'title' : 'LED Elephantasia', 
        'author' : 'DigohD', 
        'image' : 'http://ovk.no/wp-content/uploads/2012/08/Husmus-Mus-Musculus.jpg'}] 

その後、私はそれらすべてをマップし、次のサブを使用してレンダリング機能：

function LBoxContent(props){ 
     return <div className="lBoxContent" style={lContentStyle(props)}> 
      {songs[props.index].title} 
      <br /> 
      {songs[props.index].author} 
     </div> 
    } 

    function lContentStyle(props){ 
     return {backgroundImage: 'url(' + songs[props.index].image + ')'} 
    } 

すべてのボックスが作成され、各ソングのタイトルと作成者がアレイから正常に引き出され、正しくリストされます。しかし、バックグラウンドイメージは、Web URL（配列の3番目の要素）に対してのみ機能し、私のローカルURLでは機能しません。しかし、ローカルのURLは、私がcssファイルで直接使用すると動作しますが、画像を正しく指しています。

私は何が欠けていますか？ローカルURLの形式は単に間違っていますか？

ありがとうございます！

Answer 1

作成した反応し、アプリを使用している場合は、Javascriptのモジュールを使用して画像をインポートする必要があります。

その後

import nattklunn from './img/Nattklunn.png'; // import logo from '/img/Nattklunn.png'; if img is a folder at root. 

[...] 

const songs = [{'title' : 'Nattklubb', 
       'author' : 'DigohD', 
       'image' : nattklunn}, 

       {'title' : 'LED Beluga', 
       'author' : 'DigohD', 
       'image' : nattklunn}, 

       {'title' : 'LED Elephantasia', 
       'author' : 'DigohD', 
       'image' : nattklunn} 
       }] 

：

function LBoxContent(props){ 
    return <div className="lBoxContent" style={lContentStyle(props)}> 
     {songs[props.index].title} 
     <br /> 
     {songs[props.index].author} 
    </div> 
} 

function lContentStyle(props){ 
    return {backgroundImage: `url(${songs[props.index].image})`} 
}