reactjs IEで幅と高さが0にレンダリングされた画像

Question

データテーブルの各行に編集/削除ボタンを表示するReactJSコンポーネントを作成しました。

これは私のコンポーネントである：

import React from 'react'; 

const iconStyle = { 
    border:'none', 
    boxShadow:'none', 
    backgroundColor:'transparent', 
    cursor:'pointer' 

}; 


const RowEditButtons = (props) => { 
    const editButton = props.onEdit ? 
     <button type="button" className="btn btn-sm btn-secondary" onClick={props.onEdit.bind(null,props.index)} style={iconStyle}> 
      <img src="img/icon-pencil.svg" /> 
     </button> 
      : null; 
    const deleteButton = props.onDelete ? 
     <button type="button" className="btn btn-sm btn-secondary" onClick={props.onDelete.bind(null,props.index)} style={iconStyle}> 
      <img src="img/close-o.svg" /> 
     </button> 
      : null; 

    return (
     <div className="btn-group" role="group" aria-label="Edit buttons" > 
      {editButton} 
      {deleteButton} 
     </div> 
    ); 

}; 

RowEditButtons.propTypes = { 
    index: React.PropTypes.number, 
    onEdit: React.PropTypes.func, 
    onDelete: React.PropTypes.func 
}; 

export default RowEditButtons; 

（つまり、会社の標準だから）私はIE上でテストしていると私は時々ボタンが現れ、時にはそうではないことに気づきました。時々彼らはいくつかの行に表示され、他の行には表示されません。それは一貫していません。 devツールを使ってレンダリングされたDOMを見た後、ボタンと画像がそこにあることがわかります。画像の幅は「0」、高さは「0」です。それがブラウザ、reactjs、またはブートストラップの場合、私はここで何が起こっているのか分かりません。

誰か手掛かりがありますか？

Answer 1

img要素の幅と高さをautoに設定するだけで、インラインスタイルが追加されました。これは問題を解決したようです。

<img style={{width:'auto',height:'auto'}} src="img/icon-pencil.svg" />