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

Question

即使我告诉它带走 H-2/3 容器的 H + IMG 完全覆盖，第一个div 也被隐藏了，但我无法弄清楚为什么它没有在这 2 种情况下渲染图像。

第一种情况：

<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无关。