How do I set a background image from url in React (an outside url not a local file)

Question

I have the following code:

const UploadedImage = ({
    imageKey, 
    url, 
    clickHandler, 
    deleteButtonHandler, 
    isSelected}) => {
    return (
        <button 
            className="placeholder-button rounded" 
            type="button"
            style={{backgroundImage: url({url})}}
            onClick={() => clickHandler(imageKey, url)}
        >
            {isSelected && <div className="placeholder-overlay rounded" />}
            <UtilityButton 
                className="delete-uploaded-image-utility-button" 
                variant="delete"
                clickHandler={() => deleteButtonHandler(imageKey)}
            />
        </button>
    );
}

I am trying to set a background image in the button using a url from the web (not a local file). How do I do this? Current code doesn't work.

Answer 1

backgroundImage is expecting a string value which you currently aren't passing . You should change it to

style={{ backgroundImage: `url(${url})` }}