CODEWITHSUNDEEP
cssreactjstypescriptemotion
Richa
Richa

Reputation: 161

Button with image using React Typescript

I am using React Typescript.

  1. How do I add image to my button?
    I tried doing it and there are no errors, but I am getting a blank button.
  2. How do I style my button element using Emotion CSS here?
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>
);
}

Upvotes: 1

Views: 6429

Answers (2)

SeedyROM
SeedyROM

Reputation: 2441

Damian's answer is technically correct however if you're using webpack you'll need to import the image like this:

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

And use it like this:

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

Upvotes: 1

Damian Green
Damian Green

Reputation: 7495

src would be background:url(../images/abc.png) Perhaps you're confusing the src prop that an img HTML element would have?

Perhaps you should include a nested img component inside your button.

Working example: https://stackblitz.com/edit/react-emotion-hello-u9qyaa

Upvotes: 1

Related Questions