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

Question

React 16 -功能组件w hooks

梅4 -

我们有几个不同的登录页面，我添加一个简单的背景模式，以登录后的页面。很简单，对吧?

这是一个登录页面组件返回的内容

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个不同的导入后，我决定尝试已知的良好/工作组件。当我把它放在另一条路线上时，它也停止渲染图像。

我实际上是把图片没有渲染的路由切换到正在工作的组件，并且它停止在该路由上工作。

控制台中没有错误，没有导入消息失败。甚至检查器中的CSS道具也会在背景图像旁边显示相同的文本行。我就是看不出来。试过在检查器上剥离图层，搞乱位置等，你从来没有看到"坏"上的图像。路线。

两个路由都在App.js的主组件中，操作方式相同。这两个都是公共的，相同的配置…我挠头了

你知道从哪里开始吗

我的直觉告诉我可能是MUI错误，或者可能是我们如何将它们捆绑在一起的/webpack

Answer 1

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

你应该能够通过使用一个不是相对的URL(即使用一个以/开头的URL)来修复它。