React 和 Mui，在一个位置的组件上缺少背景，相同的实现

Question

React 16 - 带钩子的功能组件

梅 4 -

我们有几个不同的登录页面，我正在向登录后的页面添加一个简单的背景图案。简单的豌豆吧？

这是一个登录页面组件returns

  return (
    <Box width={1} height={1}>
      <Box style={{backgroundImage: "url('images/logoBlack.png')", backgroundSize: "cover", opacity: ".10", width: "100%", height: "100%", position: "absolute"}} />
      <Box style={{position: "relative"}} pt={10}>
        {thing1.success
          ? <Box pb={30}>
            <thingOne />
          </Box>
          : <Box pb={30}>
            <thingTwo />
          </Box>
        }
      </Box>
    </Box>
  );

在我的主要密码路由之一中，我有一个类似的组件，我已经对其进行了类似的实现。我无法让图像在其他位置呈现。在弄乱了 w 不同的进口之后，我决定尝试已知的 good/working 组件。当我把它放在另一条路线上时，它也停止渲染图像。

我确实将图像未呈现的路由切换到正在工作的组件，并且它停止在该路由上工作。

控制台中没有错误，没有导入失败的消息。甚至检查器中的 css 属性也会在背景图像旁边显示完全相同的文本行。我只是看不到它。已经尝试在检查器上剥离后层，弄乱 w 位置等，您永远不会在“坏”路线上看到图像。

两条路线都在主要 App.js 组件中，两者的完成方式相同。两者都只有 public，相同的配置..在这里挠我的头

关于从哪里开始的任何想法。

我的直觉告诉我可能是 MUI 错误，或者可能是我们如何拥有这一切 bundled/webpack

Answer 1

您正在使用相对 URL (url('images/logoBlack.png')) 指定图像。如果两个路由在最后的“/”之前不同，那么其中一个的图像路径将不正确。我怀疑如果您查看开发人员工具中的网络选项卡，您会发现请求了两个不同的图像路径，其中一个导致 404。

您应该能够通过使用非相对的 URL 来修复它（即使用以 / 开头的 URL）。

React 和 Mui，在一个位置的组件上缺少背景，相同的实现

React and Mui, background is missing on component in one location, same implement

css

reactjs

material-ui

background