Question

我正在尝试使用样式在div标签内渲染图像，因为我希望图像根据窗口的大小动态调整大小。

这是JSX代码

const heroImage = "pathToImage";

const heroImageStyling = {
  backgroundImage: `url(${heroImage})`
};

ReactDOM.render(
  <div style={heroImageStyling}></div>,
  document.getElementById("root")
);

运行此功能不会在页面上呈现任何内容

如果将文本添加到div标签中，则会将一小部分图像渲染到屏幕上（长条与文本的高度相同）

<div style={heroImageStyling}>Test Text</div>

如何更正此问题并将图像渲染到屏幕上？

Answer 1

div没有内容和宽度高度不会渲染。你可以在这里找到两种方法：

将 放入div中（当您不想定义宽度/高度时）

ReactDOM.render( <div style={heroImageStyling}> </div>, document.getElementById("root") );

在div样式中定义宽度或高度或两者都

const heroImageStyling = { backgroundImage: URL（$ {heroImage}）, height: 200px, width: 200px }; ReactDOM.render( <div style={heroImageStyling}></div>, document.getElementById("root") );

Answer 2

尝试将高度样式设置为div

const heroImageStyling = {
  backgroundImage: `url(${heroImage})`,
  height: 300px,
};

Answer 3

通过使用Jquery手动将高度属性添加到div标签以获取窗口高度

来解决此问题

let screenHeight = $(window).height() + "px";

const heroImageStyling = {
  backgroundImage: `url(${heroImage})`,
  height: screenHeight
};

除非将文本添加到div

3 个答案: