私が直面している問題は、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以外は使用していません。
次のようなファイルを要求する必要があります。
<img src={ require('./images/image1.jpg') } />
require
は静的な「インポート」に使用されるため、imports
を変更するだけです。
例:
var imageName = require('./images/image1.jpg')
<img src={imageName} />
これを試してみたところ、うまくいきました!
import I01d from '../../styles/images/01d.png';
....
<img src={this.getWeatherIconImage(iconCode)}/>
getWeatherIconImage(icon) {
switch (icon) {
case '01d': return I01d; ...
default: break;
}
}