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

designing various containers and adjusting their divisions

I have a pop-up window that contains the code snippet below, defining a template within a "container": <form method="post" class="signin" action="#"> <div id='container'> <div> <div id="divFeeTitle"&g ...

What is the best method for eliminating script tags from a Magento web store's source code?

Below is the source code for the Magento site's homepage. I am looking to eliminate all JavaScript links from the code: ...

Changing a button's value on click using PhoneGap

I've been working with phonegap and came across an issue with my buttons setup like this: <input id="my_button" type="button" onclick="my_function();"/> The goal is to capture the click event and change the button's value, my_function ( ...

Gain a comprehensive understanding of the JavaScript syntax utilized throughout the code

I stumbled upon this JavaScript code that enables asynchronous file uploads, but there are certain parts of it that I'm struggling to grasp. Any insights or explanations would be greatly appreciated - many thanks in advance. // Utilizing Ajax for Fil ...

Having trouble accessing news feed with jQuery due to an unexpected token error when attempting to cross domains

I am attempting to access the Yahoo News feed from a SharePoint site, but it is causing a cross-domain access issue. Despite trying various solutions found on numerous websites and blogs, I still cannot resolve the problem. (I am executing this code in the ...

The CSS property input::-webkit-outer-spin-button adjusts the margin-left and is exclusively visible in Chrome browser

Strange things are happening... Let me share the code for my inputs: #sign_in input#submit { height: 56px; background-color: #88b805; font-weight: bold; text-decoration: none; padding: 5px 40px 5px 40px; /* top, right, bottom, left ...

useEffect runs endlessly

Currently, I am using React with hooks to handle API calls and implement autoscroll functionality on a data-heavy screen. However, I have encountered a problem where the autoscroll feature implemented through a separate useEffect is interfering with the ot ...

Disable the scroll bar on a bootstrap modal

<span class="education"style="font-size:170%;line-height:150%;">&nbsp;Education <br> <small style=" color:gray;font-size:60%;">&nbsp; Blue Ridge University,2012-2014 </small> <br> <sma ...

Issue with the Z-Index property not functioning as expected on unordered lists within a dropdown menu

I have a dropdown menu that opens to the left, but it is displaying underneath the content. I attempted adjusting the z-index of the content to 1 and the dropdown to 2, however, this did not resolve the issue. Here is a sample in jsFiddle: https://jsfiddl ...

Creating a CSS image grid without relying on object-fit: cover can be achieved by

My goal is to create a horizontal masonry grid similar to Adobe Stock and Shutterstock without altering image aspect ratios by using object fit or any other stretching techniques. All the solutions I've found so far involve object-fit: cover, which c ...

How come the max-width property is not functioning properly on tables in Internet Explorer 7?

Is there a reason why the "max-width" property does not seem to have any effect on tables in Internet Explorer 7? While it works fine on other elements, when applied to a table, the max-width rule is completely ignored. <!DOCTYPE html PUBLIC "-//W3C//D ...

What is the method for incorporating an async middleware into a router route?

I am currently setting up routes for an express router in my project. I have a validator that deals with promises, requiring me to use await in the code. Here is how it looks: constructor() { this.router = express.Router(); this.router.use(express. ...

Issue with Kendo dropdown's optionLabel functionality malfunctioning

Check out the Kendo code snippet below for a dropdown control. I'm currently facing an issue where I am trying to display a "Please select" option in the dropdown. This code works perfectly fine for all other dropdowns except for this specific one. T ...

I'm curious as to why the size of the Preact npm package listing is showing over 1MB when it's advertised as only 3kb

Recently, I've been exploring the possibility of using Preact for creating embeddable and distributable widgets. One of the key selling points highlighted all over is its promised tiny build size of just 3kb, as stated on their official website. Howe ...

Incorporating PHP generated content into Dart without using Ajax

My current website is built using PHP (Laravel) on the server side and Javascript on the client side. Now, I am interested in replacing the Javascript with Dart. Currently, I inject data into the Javascript on the webpage like this: <script> va ...

Tips for sending an array of input field values through an Ajax request

In my current web form, there is a dynamic option that adds rows with the same attributes. These rows need to be submitted through an Ajax call to my PHP for insertion into the database. Access: <tr> <td><input type"text" name="access[nam ...

Encountering a Network Error and experiencing a blank dropdown with React-Select Async component

I recently integrated react-select into my React application. The API endpoint I'm working with responds with data structured like this: [ { value: 123, label: "Michael Carrick", first_name: "Michael", last_name: "Carrick", coun ...

Image with text overlay

In my content, the setup includes the following: <p class="All-Book-Text">Maecenas iaculis, ipsum at tempor placerat, orci ligula aliquam enim, sit amet sagittis turpis enim sit amet lorem. Praesent dapibus pretium felis, et tempus nibh posuere a.&l ...

What is the origin of this MouseEvent attribute?

In my jsfiddle project, there is a white square that can be moved around by the mouse. When the mouse button is released, it displays the x and y coordinates of the square. To see the project in action, visit: http://jsfiddle.net/35z4J/115/ One part of t ...

Making an Axios request upon clicking a button

Why is the functionality of deleting a quiz from the database not working as expected in the code snippet below, even though it works fine with Postman? deleteQuiz = () => { const quiz = this.state.quizData._id axios.delete(`http://localhost: ...