Javascript 在React中处理图像加载

我正在使用此代码加载图像

{Image} from 'react-bootstrap';
<Image src={res.imgUrl} className={styles.image} onError={(e)=>{e.target.src="/defaultImage.png"}} responsive thumbnail />
<Label bsStyle="primary" className={styles.price}}>{Price} &#8364;</Label>

它很好用。但是在加载“Label”时，元素并没有很好地显示出来，因为还没有加载的图像，并且它没有足够的位置显示

有什么好的解决办法吗

谢谢

PS：装载时看起来是这样的

---

一个简单的解决方案是利用

onLoad

事件和

didLoad

标志延迟渲染图像，直到图像完全加载

class Example extends Component {

    constructor(props) {
        super(props);

        this.state = {
            didLoad: false
        }
    }

    onLoad = () => {
        this.setState({
            didLoad: true
        })
    }


    render() {
        const style = this.state.didLoad ? {} : {visibility: 'hidden'}
        return (
            <img style={style} src={this.props.src} onLoad={this.onLoad} />
        )
    }
}

类示例扩展组件{
建造师（道具）{
超级（道具）；
此.state={
didLoad:错误
}
}
onLoad=（）=>{
这是我的国家({
迪洛德：是的
})
}
render（）{
const style=this.state.didLoad？{}:{visibility:'hidden'}
返回(
)
}
}

根据要求，使用钩子的示例如下：

function VisImgExample({src}) {
  const [didLoad, setLoad] = React.useState(false);

  const style = didLoad ? {} : {visibility: 'hidden'};

  return <img style={style} src={src} onLoad={() => setLoad(true)} />;
}

函数VisImgExample（{src}）{
const[didLoad，setLoad]=React.useState（false）；
const style=didLoad？{}:{visibility:'hidden'}；
返回setLoad（true）}/>；
}

您好，非常感谢。我希望有一种方法可以使用alt属性。但是这个解决方案很好用。在我的示例中，我必须添加{this.state.didLoad&&{PREIS}€；}，因为标签造成了问题。操作样式并没有那么好，因为我使用react bootrstrap，它会覆盖图像组件的完整样式。

function VisImgExample({src}) {
  const [didLoad, setLoad] = React.useState(false);

  const style = didLoad ? {} : {visibility: 'hidden'};

  return <img style={style} src={src} onLoad={() => setLoad(true)} />;
}