用react-bootstrap中的背景图像替换图像标签

Question

我使用react-bootstrap

构建了我的应用

我的组件中有一个图像标签。它看起来像这样：

render() {
return (
  <div id="homePage">
    <div class="hero">
      <Image src="/images/welcome-page-pic.jpg" responsive />
    </div>
  </div>

);

是的，此框架中的图像标记为“图像”而非“img”。

这将显示图像，但它不是非常敏感，所以我做了一些在开发工具中玩，并发现一个样式，如果我使用以下样式在css中使用图像作为背景图像：

.hero {
    background-image: url(/images/welcome-page-pic.jpg);
    height: 400px;
    background-size: cover;
    background-position: center right;
}

当然，这需要完全删除标签和src，但这样做只会删除图像。如果我尝试将样式添加到HTML（或更确切地说是JSX）而不是css，那么页面根本不会加载。我也试过离开图像和src，只是添加css减去背景图像样式 - 也是一个不行。不确定这是框架的问题还是愚蠢的做法。感谢。

更新：在玩了一下之后，我发现无论出于何种原因，我的本地主持人都没有接受嵌套div中的“英雄”类。如果我手动将它添加到devtools中，图像会出现并响应我想要的方式。现在的问题是为什么在jsx的页面加载时没有将类分配给div。

Answer 1

我认为它应该是来自内存的反应中的className。