What is the best way to include a background image in a div within a React component?

I'm currently following a tutorial on creating an RPG game using React. The tutorial can be found at this link. I am trying to replicate the presenter's code by typing it out myself.

However, I'm running into an issue when attempting to add a background image to a div. I keep getting an Unexpected token error specifically at 'backgroundImage' in the code snippet below:

class Player extends React.Component {
    render() {
        return (
            <div
             style={{
                  position:'absolute',
                  top: props.position[1],
                  left: props.position[0],
                  backgroundImage: 'url('${Unicorn})',
                  backgroundPosition: '0 0',
                  width:'32px',
                  height:'32px'
             }}
          />
          )
        }
        
        mapStateToProps=(state)=>{
            return{
                ...state.Player,
            }
        }
    
    }

Answer №1

Exchange the apostrophe for the tilde key `: (found under the ESC key)

backgroundImage: `url(${Unicorn})`,

Alternatively, using apostrophes:

backgroundImage: 'url('+Unicorn+')',

Don't forget to include backgroundRepeat, as without it, the background will repeat by default: (Although, the repeated background may not be visible due to size constraints)

backgroundRepeat: 'no-repeat',

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

Click on a link to open it in the current tab with customized headers

In my Angular project, I am attempting to open a link by clicking a button that redirects to the specified URL using the following code: window.open(MY_LINK, "_self"); However, in this scenario, I also need to include an access token in the header when t ...

Different ways to split up information on the client side into separate "pages"

Looking for a way to split a lengthy HTML text-only article into multiple divs for easier page navigation on mobile devices? Perhaps dividing it into separate pages that users can swipe through on their iPad or iPhone? I've experimented with JavaScri ...

Inject Dynamic HTML Content onto the Page or in a Pop-up Box

I am currently working on a C# asp.net Web Forms project that involves a credit card payment system. The system returns HTML code for a 3D payment page, but it does not auto-redirect. Here is a snippet of my request: thirdBasketItem.Price = "0.2"; basketI ...

Implementing pagination in a table with the help of jQuery

I've been working on this code for the past few days and I'm struggling to find a solution that meets my requirements. What I need is pagination within a specific section of a table, with the following actions/events: When clicking previous o ...

Even after unsubscribing in the cleanup function, the socket.io event fires twice within the React useEffect hook

Why does socket.io in react useEffect render twice even after unsubscribing in the cleanup function? Here is a snippet of the code: useEffect(() => { const callback = (data) => { //do something with data console.log("new chat receive ...

Obtain a collection of the corresponding keys for a given value from dictionaries

I'm implementing a function that retrieves a list of keys associated with a specific value in the dictionary. Although I am able to print out the first key successfully, I'm facing difficulties in displaying subsequent keys. I understand that I ...

Detecting single letters in a sentence and changing their appearance using CSS

Looking to make a subtle change to text? I need to swap out single letters in a passage (I have a cat that ate a fish). Any ideas on how to do this? The goal is to input a block of text into a textbox, then display it in a div. I've had difficulty fi ...

Ways to emphasize the chosen row within angular js 4

Today, I am exploring an example to understand how data can be passed from a parent component to a child component and back. Below are the files that I have used for this example. I have included both the HTML and TypeScript files for both the parent and ...

Hidden input fields do not get populated by Angular submit prior to submission

I am in the process of implementing a login feature in Angular that supports multiple providers. However, I have encountered an issue with submitting the form as the loginProvider value is not being sent to the server. Below is the structure of my form: &l ...

Oops! Looks like there's an issue with the route configuration for ''. Make sure to include one of the following: component, redirectTo, children, or loadChildren in order to validate the

I've been facing an issue while setting up a project with angular routing. The project is only displaying the contents of index.html and not app.component.html. Upon inspection, I noticed that the body tag just has <app-root></app-root> in ...

How can you use ES6 pure Javascript to set the src attribute of an html collection of images from an array of paths as values for each image?

Currently, I have an array filled with different src values like [path1, path2, path3], and a corresponding HTML collection which has the same number of elements as the array. I am looking for a way to assign each value from the array to set the src attrib ...

Display the length of an array using AngularJS

Hey there, I'm currently having an issue with printing a list where each entry is supposed to follow the format "element X of TOTAL". However, instead of displaying the total value, it appears as blank text. It seems like a simple mistake, but for som ...

I'm interested in clicking on an image within a div to trigger a page refresh and then automatically hide the div once the page has refreshed

UPDATE 2 SITUATION To prevent access to quiz content until the page is refreshed, I am employing a semi-transparent image with a top-margin off-set. The following code functions flawlessly on one specific page and only once: JavaScript window.addEventL ...

What is the best way to pass numerous props to a React component when using Material-UI props?

I am facing an issue with my React component that has MUI DrawerProps: export default function Navigator(props: DrawerProps) However, I require two more props like this: interface Props { items: string; onItemClick: (nr: number) => void; } If I t ...

Combining DataTables with multiple tables sourced from various JSON arrays

I am trying to display data from two different arrays within the same JSON source in two separate tables, but my code seems to be malfunctioning. JSON Information: { "Policies": [ { "name": "A", "id": "1", "score": "0" } ], ...

Sequential selection in Node-firebird is non-functional

I've been testing some simple code sequentially using the Firebird library called "node-firebird." Despite having multiple rows, it only returns 1 row every time. exports.sequentially = (select, db_con_options) => { Firebird.attach(db_con_options, ...

Searching for elements by tag name in JavaScript

Recently, I attempted to create JavaScript code that would highlight an element when a user hovers their cursor over it. My approach involves adding an event listener to every child within the first "nav" tag in the current document: let navigation = docum ...

"Automate the process of manual content duplication with JavaScript's for each replacement

Seeking a solution to automate the selection process without writing individual JS scripts for every input. For instance, having 10 double inputs (total of 20 inputs) and utilizing the each() function or other methods by only declaring selectors. Find th ...

Encountering problem with React Typescript fetching data from Spring Data REST API: the error message "Property '_embedded' does not exist" is being displayed

I am currently working on a React application that utilizes Typescript to fetch data from a Spring Data REST API (JPA repositories). When I make a specific request like "GET http://localhost:8080/notifications/1" with an ID, my JSON response does not pose ...

Failure to execute after Ajax success

Currently working on a login page using Spring MVC on the server side and JS/Ajax on the client side. I'm facing an issue where the server code executes but does not return anything. <script type="text/javascript"> $(function() { $( ...