反応の画像の正確な幅と高さを取得

Question

私は反応が新しくなりました。 file-loaderプラグインで読み込まれた画像の配列があります。

images.map((img, index) => <img src={img}> 

どのように各画像の幅と高さの属性を取得できますか？私はどのように属性を設定できるのか知っていますが、配列内の画像の高さと幅はわかりません。

Answer 1

あなたはimage-size-loaderのようなものを使用して探ることができます。 file-loaderは、あなたが探している動作を提供していません。

Answer 2

多くの方法があり、フロントエンドの世界ではまだまだ議論の余地があります。ここにあなたを始めさせる2つの簡単な方法があります。

インラインスタイル

<img style={{width: '50px', height: '50px'}} src={img} /> 

シンプルなCSS

import './MyCSSFileName' 

<img className="fixed_img" src={img} /> 

// in your .css file 
.fixed_img { 
    width: 50px; 
    height: 50px; 
}