Using React Typescript to create a button component with an attached image

I am currently utilizing React with Typescript.

  1. How can I incorporate an image into my button?
    I've attempted to do so without any errors, but the button appears blank.
  2. What's the best way to style my button element using Emotion CSS in this context?
import React from "react";

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

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

Answer №1

src is utilized as

background:url(../images/abc.png)
. Are you possibly mistaking it for the src attribute of an img element in HTML?

You may want to consider adding a nested img component within your button.

Here's a functioning example: https://stackblitz.com/edit/react-emotion-hello-u9qyaa

Answer №2

While Damian's response is technically accurate, if you are utilizing webpack, the proper way to import an image is as follows:

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

Subsequently, you can use the imported image in your code like so:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to center div container with margin set to auto

I'm struggling to center my container on the website. My goal is to have it centered and take up about 80% of the page so I can incorporate an image slider and text inside. Using margin: 0 auto doesn't seem to be achieving what I want. The backgr ...

A guide on incorporating typings for d3-tip in TypeScript 2.0

Seeking to implement tooltips in my charts using the d3-tip library. After installing typings for d3-tip in Typescript 2.0: npm install @types/d3-tip --save The typings appear in my package.json: "dependencies": { "@types/d3": "^4.7.0", "@types/d3- ...

Align and resize image using CSS styling

Seeking assistance on centering and cropping images using CSS. Tried implementing the technique from this specific article. However, experiencing inconsistencies in device UI output. Can someone shed light on this behavior? Scenario: The objective is t ...

When I hover over my images, they begin to flash before my eyes

My layout is set up so that when I hover over the printer image, it should switch to another image. However, instead of smoothly transitioning, the image starts to flash. This issue occurs in all browsers, indicating that I have made a mistake somewhere. ...

adding content to div is becoming less speedy

Currently, I'm developing a drawing board using only html/css/jquery and the drawing functionality is working smoothly. The approach I've taken involves capturing the mousemove events and placing a dot (div) at each point where the event occurs, ...

When a React component mounts repeatedly, it can lead to complications within the useEffect hook

In our React application, we have implemented a custom hook to send data to Google Analytics. To avoid sending duplicate values, we included a unique "marker" string that captures the value of the data being sent. The hook generates a new "marker" each tim ...

Developing a robust system for managing classnames

I have a question regarding the article I found on Quora about Facebook's CSS class names structure. They mentioned that both Facebook and Google use a build system to convert developer-friendly class names into shorter ones to save bandwidth and crea ...

Updating multiple documents using Mongoose with a specified condition

I am currently attempting to update all documents within my MongoDB database using Mongoose. While I know this question has been asked before, I have not found the answer that suits my specific needs. I am utilizing version 4.2 I am endeavoring to use upd ...

Compact selection box, vast information

My dilemma is having restricted space for a dropdown containing a considerable amount of text. Is it feasible to keep the dropdown width small while expanding the list popup size? Update: My browser of choice is Internet Explorer. ...

Tips for adjusting the language settings on a date picker

Is there a way to change the language from English to French when selecting a month? I believe I need to configure something in the core.module.ts. How can I achieve this? https://i.sstatic.net/Cpl08.png @NgModule({ declarations: [], imports: [ Co ...

Utilizing a variable beyond the scope of a function in React

I am trying to display the printCenterCode within a MenuItem. I have a function that reads a JSON and generates an array with the relevant data. To make the MenuItem visible, I need to extract that information from the function (it's located in the r ...

Angular provides a variety of functionality to control the behavior of elements in your application, including the

I have a page with Play, Pause, Resume, and Stop icons. When I click on the Play icon, the Pause and Stop icons are displayed. Similarly, I would like to show the Resume and Stop icons when I click on the Pause icon. I need help with this code. Thank you. ...

The CSS border on a div has inexplicably ceased functioning in Chrome, yet continues to work perfectly in

Just a moment ago, something strange happened while I was working on my memory game. After reopening the page, the borders around the divs stopped showing up when navigating with the keyboard arrows. (Click in the window to activate the arrow keys.) Normal ...

Using mui autocomplete alongside react-hook-form: defaultValue within formData

When setting the defaultValue of the Autocomplete component like this: <Controller control={control} name={name} render={({field: {onChange, value}}) => ( <Autocomplete freeSolo={freeSolo} options={options} renderInput= ...

Hover over the text below to see an image appear in its place

I'm looking to swap out some text with an image when hovering over it, using basic HTML/CSS. NO: show the image below the text NO: display the text on top of the image NO: replace one image with another YES: replace the text with an image ...

Arranging rows within the Zurb Foundation grid structure

As a newcomer to Zurb Foundation 5, I am currently experimenting with building a complex header bar using columns and rows. My goal is to utilize nested rows within a main row, but I am having difficulty figuring out the correct div ordering. Is it feasib ...

Can someone help me troubleshoot why my multi-step form is not functioning properly?

I've been working on a multi-phase form, but it's not behaving as expected. I've tried different code variations, but for some reason, it's not functioning properly. After spending two days on it, I'm starting to feel a bit frustra ...

Is it possible to create a progressive web app (PWA) using React

In my quest for a clear answer, I have spent hours researching the compatibility between React Native and PWA technologies. As someone new to both of these platforms, I am struggling to find a definitive solution. My goal is to create a cross-platform mob ...

Is there a more efficient method for horizontally and vertically aligning in this particular scenario using HTML and CSS?

Embarking on my HTML/CSS journey, I am taking on the challenge of creating my very first website. Currently tackling the final CSS project for Codecademy. I've been tinkering with this task for what feels like an eternity and just can't seem to ...

Can you explain how this promise functions within the context of the mutation observer, even without an argument?

Recently, I came across a mutation observer in some TypeScript code that has left me puzzled. This particular implementation of a promise within the mutation observer seems unconventional to me: const observer = new MutationObserver((mutations: MutationR ...