javascript 2次返回相同的元素

qxsslcnc 于 2023-04-19 发布在 Java

关注(0)|答案(2)|浏览(120)

我想做一个Netflix的克隆应用程序，我有一个问题。我在做的时候看一个视频，我在做我在视频中看到的。
我已经用这个代码添加了一个横幅图像。
验证码：

function Banner() {
  return ( 
    <header 
      className="banner" 
      style={{
        backgroundSize: "cover",
        backgroundImage: 'url("https://thelesfilms.files.wordpress.com/2016/06/netflix-banner.jpg?w=640")',
        backgroundPosition: "center center",
      }}>
    </header>
  );
}

CSS：

.banner {
  height: 200px;
  position: relative;
}

当视频中的人编写相同的代码时，它可以正常工作，并按预期显示一个图像。当我做同样的事情时，有两个图像，我不明白为什么。（我没有在HomeScreen.js中返回Banner函数2次。）

JavaScript

来源：https://stackoverflow.com/questions/76030094/returns-the-same-element-2-times

2条答案

按热度按时间

db2dz4w81#

尝试从图像URL中删除?w=640，

function Banner() {
  return ( 
    <header 
      className="banner" 
      style={{
        backgroundSize: "cover",
        backgroundImage: `url("https://thelesfilms.files.wordpress.com/2016/06/netflix-banner.jpg")`,
        backgroundPosition: "center center",
      }}>
    </header>
  );
}

.banner {
  height: 200px;
  position: relative;
  background-repeat:no-repeat;
}

赞(0）回复(0）举报 2023-04-19

yi0zb3m42#

如果您看到的是两个而不是一个横幅图像，则可能是您不小心在HomeScreen组件中或代码的其他地方包含了两次Banner组件。以下是解决此问题的一些步骤：
1.再次检查您没有在HomeScreen组件或任何其他组件中呈现Banner组件两次。
1.检查项目中是否有Banner组件的重复导入。如果您使用webpack等捆绑工具，则可能在代码中多次导入Banner组件。
1.检查是否有任何全局样式或CSS类可能会影响Banner组件。可能是某些全局CSS样式被应用到banner类，导致图像出现两次。
1.如果仍然有问题，请尝试向Banner组件添加唯一的类名或ID，看看是否可以解决问题。
希望这些步骤之一能帮助您识别问题并修复双重图像问题。

赞(0）回复(0）举报 2023-04-19

我来回答

javascript 2次返回相同的元素

2条答案

相关问题

热门标签

最新问答