獲取反應中影像的確切寬度和高度

我是新來做出反應的。我有一個由file-loader插件加載的圖像數組。我把它們映射成這樣：獲取反應中影像的確切寬度和高度

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

如何獲得每個圖像的寬度和高度屬性？我知道如何設置屬性，但我不知道圖像的高度和寬度，因爲它們在數組中。

2017-08-22 vmoh_ir

基於什麼的高度和寬度？就像頁面的樣式表具有'img {height：40px; }這是否會影響這個值，或者你是在談論實際的圖像大小，因爲它會看到100％的縮放？並獲得它在'渲染'功能內使用或稍後一段時間？ – loganfsmyth

@loganfsmyth是的我需要實際的圖像大小，是的我想在渲染功能中使用它們。 –

你可以探索使用類似image-size-loader。 file-loader不提供您正在尋找的行爲。

2017-08-23 00:26:26 loganfsmyth

這就是我一直在尋找的。它是否能夠設置outputPath和其他文件加載器選項？ –

我還發現[圖像大小]（https://www.npmjs.com/package/image-size）這只是爲了獲取圖像的大小。 –

你必須看看選項的文檔，我不知道。加載器[使用'image-size']（https://github.com/boopathi/image-size-loader/blob/master/index.js#L2）。 – loganfsmyth

有很多方法，它仍然是前端世界中哪種方式最好的辯論。這裏有兩個簡單的方法讓你開始。

內嵌樣式

<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; 
}

2017-08-22 22:13:07

其實我的問題是，我應該如何獲得寬度和高度 –

回答