我正试图在我的Reaction项目中添加一个背景图像,但它没有显示,尽管有正确的相对路径作为URL. 这是我的"App.js":

import "./styles.css";
        export default function App() {
          return (
            <div className="App">
              <h1>Hi All!</h1>
              <h2>Please guide why the background image isn't showing here???</h2>
            </div>
          );
        }
    

下面是"style es.css":

.App {
  font-family: sans-serif;
  text-align: center;
  background: aqua;
  height: 100vh;
  background-image: url(./images/img-2.jpg);
  /* background-image: url(https://pixabay.com/photos/dandelion-seeds-dew-dewdrops-445228/); */
  background-size: cover;
  background-repeat: no-repeat;
}

下面是代码沙箱的例子:https://codesandbox.io/s/festive-scott-h28j42?file=/src/styles.css:0-294

推荐答案

在codesandbox上,你必须将图片放在公共文件夹中,只需将你的"图片"文件夹移到那里.

Second : your pixabay url seems to not pointing on image file, try with cdn file url :
/* background-image: url(https://cdn.pixabay.com/photo/2023/07/29/08/31/snow-felberich-8156446_1280.jpg); */

编辑后的代码Sandbox :https://codesandbox.io/s/backgroundimage-forked-5n5fw8?file=/src/styles.css

Css相关问答推荐

CSS Grid,意想不到的差距

如何居中对齐容器父对象?

如何使用css::Part()定位Web组件shadowDOM中的第N个元素

如何使TWebPanel具有圆角?

使用 CSS 定位悬停/弹出 div - 字形浏览器网页

Next.js 条件样式

为什么我的 React slick 轮播响应能力不起作用?

React MUI 从 CSS 伪元素中删除内容

背景图像允许溢出输入按钮

CSS网格列随着长内容改变大小

CSS Grid 2 列和半高

普通流,流布局,块和内联布局有什么区别?

css中的背景图像没有被缓存

使用 CSS 强制侧边栏高度 100%(带有粘性底部图像)?

修复 Mobile Safari (iPhone) 上文本呈现不一致且某些字体比其他字体大的字体大小问题?

如何使用 JavaScript 获取元素的背景图片 URL?

为什么浏览器会为 CSS 属性创建供应商前缀?

通过 Bootstrap4 对列进行排序

标签的 CSS 宽度

为什么对 HTML 表单而不是表格使用定义列表(DL、DD、DT)标签?