Кнопка с изображением с использованием React Typescript

Question

Я использую React Typescript.

1. Как мне добавить изображение к моей кнопке?
   Я пытался сделать это, но ошибок нет, но я получаю пустую кнопку.
2. Как мне стилизовать мой элемент кнопки, используя Emotion CSS здесь?

import React from "react";

function PostButton(props){
    let style = {
        width:24,
        height:24,
        src: "../images/abc.png"
    };
    return(
        <button style={style} onClick={() => props.handleClick()}>{props.label}</button>
    );
}

return (
    <div style={style}>
        <PostButton src={"../images/abc.png"} handleClick = {props.incrementScore}/>
    </div>
);
}

Answer 1

src будет background:url(../images/abc.png) Возможно, вы путаете src проп, который имел бы элемент img HTML?

Возможно, вам следует включить вложенный img компонент внутри Ваша кнопка.

Рабочий пример: https://stackblitz.com/edit/react-emotion-hello-u9qyaa

Answer 2

Ответ Дамиана технически верен, однако, если вы используете веб-пакет, вам необходимо импортировать изображение следующим образом:

import abc from "../images/abc.png";

И использовать его следующим образом:

function PostButton(props){
    let style = {
        width:24,
        height:24,
        background: `url(${abc})`,
    };
    return(
        <button style={style} onClick={() => props.handleClick()}>{props.label}</button>
    );
}