Html 使用内联样式加载背景图像时出错

我的引导模板中的一个部分包含2个并排的div，两个div的列宽度相等。在左边我需要一张背景图片来填充div，在右边我有一些联系方式。除图片未加载外，所有内容均正确显示。该图像当前与index.html位于同一文件夹中，因此我不确定它为什么不会加载

我的html部分：

 <section class="ftco-about img ftco-section ftco-no-pt ftco-no-pb" id="about-section">
              <div class="container">
                <div class="row d-flex no-gutters">
                  <div class="col-md-6 col-lg-6 d-flex">
                    <div class="img-about img d-flex align-items-stretch">
                      <div class="overlay"></div>
                      <div class="img d-flex align-self-stretch align-items-center" style="background-image:url(def.jpeg);">
                      </div>
                    </div>
                  </div>
                  <div class="col-md-6 col-lg-6 pl-md-5 py-5">
                    <div class="row justify-content-start pb-3">
                      <div class="col-md-12 heading-section ftco-animate">
                        <h1 class="big">About</h1>
                        <h2 class="mb-4">About Me</h2>
                        <p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
                        <ul class="about-info mt-4 px-md-0 px-2">
                          <li class="d-flex"><span>Name:</span> <span>Ronaldo Fredrickson</span></li>
                          <li class="d-flex"><span>Date of birth:</span> <span>November 28, 1989</span></li>
                          <li class="d-flex"><span>Address:</span> <span>San Francisco CA 97987 USA</span></li>
                          <li class="d-flex"><span>Zip code:</span> <span>1000</span></li>
                          <li class="d-flex"><span>Email:</span> <span>ronaldo@gmail.com</span></li>
                          <li class="d-flex"><span>Phone: </span> <span>+1-2234-5678-9-0</span></li>
                        </ul>
                      </div>
                    </div>
                    <div class="counter-wrap ftco-animate d-flex mt-md-3">
                      <div class="text">
                        <p class="mb-4">
                          <span class="number" data-number="120">0</span>
                          <span>Project complete</span>
                        </p>
                        <p><a href="#" class="btn btn-primary py-3 px-3">Download CV</a></p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>

关于
关于我
一条名为杜登的小河从他们的住处流过，为他们提供了必要的regelialia


姓名：罗纳尔多·弗雷德里克森
出生日期：1989年11月28日
地址：旧金山CA 97987美国< /LI>
邮政编码：1000
电子邮件：ronaldo@gmail.com
电话：+1-2234-5678-9-0


0
项目完成

图像应出现在此分区中

正如您所看到的，图像应该位于以下位置：

---

您需要为图像指定

宽度

和

高度

<div class="img d-flex align-self-stretch align-items-center" style="background-image:url(def.jpeg); width: 100%; height: 100%;">

您可以使用img

<img class="img d-flex align-self-stretch align-items-center" src="def.jpeg" alt="about">

谢谢您的回复。我尝试了上面的方法，但是图像仍然没有显示出来。另一个选择是使用

img

标记，它来源于HTML本身。图像的大小是多少？图像很有可能加载正确，但大小不合适（你只能看到一个角落）。使用

style=“background:url（'/def.jpeg'）0/cover”

。这是

背景图像的缩写：url（'/def.jpeg'）；背景尺寸：封面