web-dev-qa-db-ja.com

インポートせずにJSXを使用してReactに画像を表示する

私が直面している問題は、imgタグにあります。シングルが懸念される場合、以下のコードは画像をロードします：

import image1 from './images/image1.jpg;
<img src={image1} />

ただし、次のコードはロードされません。

 <img src={'./images/image1.jpg'}/>
            or
  <img src='./images/image1.jpg'/>

[{'img'： './ images/image1.jpg'、 'name'： 'AAA'}、{'img'： './ images/image2.jpg'、 'のようなjsonをループする必要がありますname '：' BBB '}]と名前をフッターとして画像として表示します。ループは問題ありませんが、画像は読み込まれません。実際にすべての画像をインポートして追加することはできません。現在のところ、JSX以外は使用していません。

javascriptreactjsjsx
25
Gayathri

次のようなファイルを要求する必要があります。

<img src={ require('./images/image1.jpg') } />
46
Win

requireは静的な「インポート」に使用されるため、importsを変更するだけです。

例：

var imageName = require('./images/image1.jpg')
<img src={imageName} />
5
Robsonsjre

これを試してみたところ、うまくいきました！

import I01d from '../../styles/images/01d.png';
....
<img src={this.getWeatherIconImage(iconCode)}/>

getWeatherIconImage(icon) {
  switch (icon) {
    case '01d': return I01d; ...
    default: break;
  }
}
1
Daniel C. Deng