Реагируйте кнопку с изображением с реквизитом

Question

сейчас учатся реагировать и нужно делать несколько похожих кнопок с разными изображениями. Мой компонент:

export default class Button extends Component {
render() {
    return (

    <button className="header_btn"></button>
    )
}

}

Как установить изображение для этой кнопки с помощью реквизита? Изображения, сохраненные в локальном хранилище

Answer 1

Вы можете применить изображение к кнопке, используя background: url ('imageAddressInString');

<button style={background: `url(${this.props.imageUrl})`}></button>

и передать imageUrl компоненту Button в реквизите.

const firstImage = './example.jpg';
<Button imageUrl={firstImage} />

Answer 2

Привет, пожалуйста, проверьте этот пример: Здесь я передаю text и imageUrl в качестве реквизита.

import React from "react";

export default class Button extends React.Component {
    render() {
        return (
            <button className="header_btn">
                <img height="15px" width="15px" src={this.props.imageUrl} />
                {this.props.text}
            </button>
        )
    }
}

Вы должны использовать Button Component в своем приложении. js или любой другой компонент, например ниже:

<Button text="Click" imageUrl="https://www.tutorialspoint.com/latest/inter-process-communication.png" />