使用 url() 方法时背景图像不起作用？

Posted 2023-03-15

【中文标题】使用 url() 方法时背景图像不起作用？

【英文标题】：background-image is not working when using url() method?

【发布时间】：2022-01-19 12:16:19

【问题描述】：

我正在尝试使用 background-img:url(imageLing) 将图像置于背景中 但不起作用，当检查元素 background-image: url(assets/backgrounds/5.jpg); 时它会返回给我 有什么问题： 这是我的代码

//login page 

<LoginWrapper img=`assets/backgrounds/$randomImage.jpg`>
        <Wrapper>
          <LoginForm onClickLogin=login />
        </Wrapper>
      </LoginWrapper>

//css file using styled- components 

interface LoginProps 
  img: string;


export const LoginWrapper = styled.div<LoginProps>`
  display: flex;
  align-items: center;
  justify-content: center;
  height: 93vh;
  background-image: url($( img ) => img);
  background-size: cover;
  background-repeat: no-repeat;
`;

【参考方案1】：

React 通常会在部署之前捆绑您的项目，这会缩小图像并更改图像路径。因此，通过道具传递路径将不起作用。为了使图像能够正确加载，您必须将它们作为导入动态引用。

登录页面

//login page 
import img from './assets/backgrounds/bg.gif'; // <= update this path according to your folder structure, i've added this path as an example

<LoginWrapper img=img>
    <Wrapper>
      <LoginForm onClickLogin=login />
    </Wrapper>
</LoginWrapper>

CSS 文件选项 1（使用来自 props 的 img）

//css file using styled- components 

// interface LoginProps 
// img: string;
// 

export const LoginWrapper = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  height: 93vh;
  background-image: url($( img ) => img);
  background-size: cover;
  background-repeat: no-repeat;
`;

CSS 文件选项 2（在此文件中导入图像）

//css file using styled- components 

import img from './assets/backgrounds/bg.gif'; // <= update this path according to your folder structure, i've added this path as an example

export const LoginWrapper = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  height: 93vh;
  background-image: url($img);
  background-size: cover;
  background-repeat: no-repeat;
`;

【讨论】：

不工作。

图片路径是否正确？您可以尝试将图像直接导入CSS文件一次并检查。例如：background-image: url($ img );

如何自己导入图片？

@AmmarALSananni 我编辑了我的帖子并添加了CSS File Option 2。我还编辑了CSS File Option 1 并评论了将 img 类型定义为字符串的接口，但它在这里是一个对象。您现在可以尝试这两个选项。谢谢

感谢您的回答，我认为问题不在于道具，而在于 url() 由于某种原因没有准备好图像。