我正在尝试在 jsx-react 中动态添加图像，但它不会显示

Posted 2023-02-22

【中文标题】我正在尝试在 jsx-react 中动态添加图像，但它不会显示

【英文标题】：I am trying to add Image dynamically in jsx-react but it won't show up

【发布时间】：2021-03-14 03:51:30

【问题描述】：

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

var bImg = prompt("Which image do you want to set as background image?");
const bStyle = 
  backgroundImage: "url(bImg)" // i stored the link here 
;

const rootElement = document.getElementById("root");
ReactDOM.render(
  <div style=bStyle> // I stored it here but still it won't show up
    <h1>Hello world!!</h1>
  </div>,
  rootElement
);

其余的工作正常，但背景图像不会从我在提示中输入的 URL 加载。错误显示为“bImg”分配了一个值，但未使用。

【参考方案1】：

输出：

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

import App from "./App";

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

var bImg = prompt("Which image do you want to set as background image?");
const bStyle = 
  backgroundImage: `url($bImg)` // i stored the link here
;

const rootElement = document.getElementById("root");
ReactDOM.render(
  <div style=bStyle>
    // I stored it here but still it won't show up
    <h1>Hello world!!</h1>
  </div>,
  rootElement
);

StackBlitz Demo

【讨论】：

它工作正常。在 URL 之前我没有使用过这些类型的标记。它教会了我一些新东西

它被称为字符串插值或模板文字，您可以在这里阅读更多信息：developer.mozilla.org/en-US/docs/Web/javascript/Reference/…

@Ketan 你是如何制作这个 gif 的？

Filmora 和在线 gif 转换器：ezgif.com