Having trouble displaying dynamically added images in my jsx-react component. The images are not showing up as expected

import React from "react";
import ReactDOM from "react-dom";

var bImg = prompt("Enter the URL of the image you want to set as the background:");
const bStyle = {
  backgroundImage: "url(bImg)"; // The link is stored here 
};

const rootElement = document.getElementById("root");
ReactDOM.render(
  <div style={bStyle}> // Even though it's stored here, the background image isn't showing
    <h1>Hello world!!</h1>
  </div>,
  rootElement
);

Everything else seems to be functioning correctly, but the background image doesn't load from the URL entered in the prompt. An error indicates that 'bImg' has a value assigned to it, but it isn't being used.

Answer №1

Here is the output:

https://i.stack.imgur.com/iHDnk.gif

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

var bImg = prompt("Please input the link of the image you want to set as background: ");
const bStyle = {
  backgroundImage: `url(${bImg})` // The link has been stored here
};

const rootElement = document.getElementById("root");
ReactDOM.render(
  <div style={bStyle}>
    // I have stored it here but unfortunately, it's not showing up
    <h1>Hello world!!</h1>
  </div>,
  rootElement
);

Check out the StackBlitz Demo

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

Incorporating various vertical divs with 100% height and width

Struggling to achieve the creation of multiple divs with 100% width and height? Here is an example: <html> <body> <div id="wrapper"> <div id="1">100% height & width, all you can see when opening this file!</div&g ...

Interacting with a third-party application via OAuth using Node server to send REST requests

https://i.stack.imgur.com/Znrp0.png I've been working on a server to manage chat messages and need to integrate with a JIRA instance. I'm currently using the passport-atlassian-oauth strategy for authentication and BearerStrategy for requests. H ...

The specified dependency, * core-js/fn/symbol, could not be located

I am in the process of developing a Vue.js application with Vuex and have encountered some errors during the build. I attempted to resolve the issue by installing npm install --save core-js/fn/symbol, but unfortunately, it did not work as expected. https:/ ...

How can I make my Grid items in React and Material-UI occupy the entire horizontal space without wrapping to the next row?

I am currently utilizing Material-UI within a React 16.10 project. My goal is to create a table where the left column consists of an icon, while the right column displays a label and address stacked on top of each other. I want the items in the right colum ...

Provide the user with an .ics file for easy access

Recently, I developed an HTML5 application that enables users to download calendar entries in iCal format. These iCals are generated using PHP. Up until now, my method involved creating the iCal file with PHP and saving it to the web server's hard dis ...

Receiving an error of "Undefined" when attempting to retrieve an array that is nested within an object

I've been struggling with the same question for a while now. Despite my knowledge of dot and bracket notation, as well as attempts using empty keys, I'm still unable to make it work. The situation involves a JSON array of objects obtained from an ...

The Challenge of a Chess Board that Adjusts to Different

Looking at the demonstration below, it's clear that the chessboard adjusts properly to a width of no more than 512px while adapting to different devices. The pieces also resize accordingly with the board. However, I'm encountering an issue when a ...

Highlighting with pretty JSON formatting

Is there a way to format JSON on a website and emphasize certain text or lines within it? Ideally, I'm looking for an IFRAME service that I can link to a URL where the JSON is downloaded and displayed as HTML. I want to be able to specify a search st ...

What is the best way to prematurely exit an outer function when there are multiple inner non-blocking function calls?

For the purpose of learning, I am working on creating a basic version of async.parallel. The description from the documentation is as follows: parallel(tasks, [callback]) Run the tasks array of functions in parallel, without waiting until the previou ...

Utilizing string interpolation within the parameters of an AJAX call

I have a locale variable that can hold values such as en, fr, or es. The goal is to include this locale key in an AJAX request as part of the data parameter. let locale = "en"; let name = "example"; $.ajax({ url: "/path", method: "PUT", data: {chara ...

Typescript - Creating a Class with Constructor that Extends an Interface without Constructor

I am faced with an interface structured as follows: interface Person { id: number name: string } In my implementation class for this interface, I have the following code: class PersonClass implements Person { id: number = 123 name: string = &apo ...

Creating videos with NEXTJS

I am currently developing a website using NextJS and I encountered an issue when trying to set a video as the background. Initially, everything works perfectly during the first render, but upon reloading the screen, the video no longer plays in autoplay mo ...

The concept of Puppeteer involves defining the browser and page in a synchronous manner

In the beginning of the Puppeteer tutorial, it is instructed to follow this code snippet: const puppeteer = require('puppeteer'); (async () => { await page.goto('https://example.com'); const browser = await puppeteer.launch ...

Experiencing a challenge with relative paths in Next.js when integrating with React

Hey there! I currently incorporate React with Fuse in the Front End, and utilize Nextjs for server operations. However, I've encountered an issue with Next regarding relative fuse paths. For instance, when using the relative path @history, it results ...

Retrieve the weekday dates for a specific year, month, and relative week number using Javascript or Typescript

I am in need of a custom function called getDaysOfWeekDates that can take a year, a month (ranging from 0 to 11), and the week number of each month (usually 4-5 weeks per month) as parameters, and return a list of dates containing each day of that particul ...

Using jQuery to swap out intricate background designs

I'm attempting to use jQuery to change the background-color of an element from: background: transparent linear-gradient(#C0B 45%, #C0B) to: background-color:#000; Unfortunately, my attempt to remove the background property with .removeAttr() has n ...

JQuery submit event not triggering object setting

I'm looking to gather input values from a form and store them in an object for an offer. After trying the following code on submit: $(document).ready(function(){ $('#formOffre').on('submit', function(e) { e.preventDefault ...

The object returned by bodyParser is not a string but a data structure

I have been working on implementing a JSON content listener in Typescript using Express and Body-parser. Everything is functioning perfectly, except when I receive the JSON webhook, it is logged as an object instead of a string. import express from 'e ...

Ionic timer binding issue: troubleshooting tips

Recently, I developed a stopwatch factory service that primarily focuses on running. Please disregard the reset and other functionalities as they are not yet implemented. Despite setting up $scope.time to capture timer changes, it doesn't seem to upd ...

Steps for resetting the input ref in a Material-UI textfield

How can I clear the input of a text field after a specific action? I keep encountering an error stating "The value of the input element, required for a controlled component." const emailRef = useRef<TextFieldProps>(null); // Clear logic ...