为什么第一个 div 及其图像没有被渲染？

Question

第一个 div 只是隐藏了，即使我告诉它取 h-full 的 h-2/3 容器 + img 已完全覆盖，但我无法弄清楚为什么它不会在这两种情况下呈现图像.

第一种情况：

<div class="bg-gray-900 flex mx-auto px-12 py-12 h-2/3 w-full">
  <div class="relative w-1/2 h-full bg-white">
  <img
      class="absolute h- w-full object-cover"
      src="https://unsplash.com/photos/TseVAW2e2EM"
      alt=""
      />
      </div>

   <div class="bg-white text-white">dsadsadddaada</div>
</div>

第二种情况：

<div class="flex justify-around flex-wrap">
          <div class="w-1/4 px-6 bg-white h-512px rounded-lg overflow-hidden border shadow-lg">
            <div class="relative pb-2/3">
              <img
                class="absolute h-full w-full object-cover"
                src="https://source.unsplash.com/user/the_roaming_platypus"
                alt="https://source.unsplash.com/user/the_roaming_platypus"
              />
            </div>
            <div class="p-6">
              <div class="mt-2 inline-block bg-teal-200 text-teal-800 text-xs px-2 rounded-full uppercase font-semibold tracking-wide">
                New
              </div>
              <h4 class="mt-1 font-semibold text-lg leading-tight truncate">
                Iphone 10
              </h4>
              <div class="mt-2 flex items-center">
                <span class="ml-2 text-gray-600 text-sm">34 reviews</span>
              </div>
            </div>
          </div>
        </div>

Answer 1

第一个示例中使用的链接似乎有些不正确，因为它使用 mime 类型 html/text 进行跨域响应，而第二个示例中的链接返回图像。

如果您将链接 2 放在第一种情况下 - 图片将正常呈现。

所以你的问题与html或css无关。