带有道具的带有图像的按钮

Question

现在学习会做出反应，需要对不同的图像做一些类似的按钮。我的组件：

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

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

}

如何使用道具将图像设置到此按钮？保存在本地存储中的图像

Answer 1

嗨，请检查此示例：在这里，我将text和imageUrl作为props。

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

您应该在App.js或任何其他类似如下的组件中使用Button组件：

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

Answer 2

您可以使用背景在按钮上应用图像：url（'imageAddressInString'）;

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

并将imageUrl传递到道具中的Button组件。

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