背景图像不适用于以下代码

Question

这是我的代码，不知何故我无法加载图像。

import React from 'react'
import styled from "styled-components"


function Section() {
  return (
    <Wrap>
      
    </Wrap>
  )
}

export default Section

const Wrap = styled.div`
  width: 100vw;
  height: 100vh;
  background-image: https://drive.google.com/file/d/1rMeRfE2OEktMOGVlgA1TwJKNj1teuLtG/view?usp=sharing;
`

我应该怎么办？

Answer 1

对于存储在 Google 云端硬盘中的图像的直接链接：

https://drive.google.com/uc?export=view&id=file's ID

因此，图像的 URL 应为：

https://drive.google.com/uc?export=view&id=1rMeRfE2OEktMOGVlgA1TwJKNj1teuLtG。

然后，通过 CSS background-image: url('https://drive.google.com/uc?export=view&id=1rMeRfE2OEktMOGVlgA1TwJKNj1teuLtG') 使用它

，请参阅，在 Google Drive 上显示存储在 Google 云端硬盘中的文件（例如图像）网站

Answer 2

当你使用background-image时，你应该使用带有URL的url()。

参考： https://developer.mozilla.org/en- US/docs/Web/CSS/background-image

const Wrap = styled.div`
  width: 100vw;
  height: 100vh;
  background-image: url("https://drive.google.com/file/d/1rMeRfE2OEktMOGVlgA1TwJKNj1teuLtG/view?usp=sharing");

编辑

您的网址不是图像，因此您无法使用 Google 云端硬盘网址加载图像。

Answer 3

您为 CSS 属性设置了错误的值。

✓ 使用此：

background-image: url("https://drive.google.com/file/d/1rMeRfE2OEktMOGVlgA1TwJKNj1teuLtG/view?usp=sharing");

✘ 代替此代码：

background-image: https://drive.google.com/file/d/1rMeRfE2OEktMOGVlgA1TwJKNj1teuLtG/view?usp=sharing;

正如在您当前的问题中一样，我发现您忘记输入 url()。