在我单击检查元素之前，图像不会在 Chrome 中显示答案

【问题标题】：Images not showing in Chrome until I click inspect element在我单击检查元素之前，图像不会在 Chrome 中显示
【发布时间】：2013-11-13 14:37:47
【问题描述】：

我在 Chrome 中使用我的 OpenCart 网站时遇到了一个奇怪的错误。产品图片未显示，但我看到了它们应该出现的白色区域。

如果产品没有图片，它会向左对齐，但在这种情况下，我可以看到图片通常所在的白色区域。

这是疯狂的部分，如果我点击检查元素，图像会突然出现。

一些css代码

.product-list .image {
float: left;
margin-right: 10px;
overflow: auto;
}

【问题讨论】：

你能给我们发个 jsfiddle 吗？
在 CSS sn-p 中我们无能为力。
是关于所有图像、所有产品图像、所有产品详细信息图像还是所有产品列表图像（然后在显示列表和网格时都显示？）？
我认为您正在使用 JS 动态添加图像的 src。如果是这样，那么在打开检查元素时它可能正在工作，因为您正在访问console.log 中的这些图像元素。因此，如果您删除此控制台，它将无法正常工作。此外，为了使其正常工作，请将您的 dynamic-src 逻辑放在适当的窗口事件序列中。

【解决方案1】：

在 CSS 中你需要设置 width 和 height 属性。

【讨论】：

【解决方案2】：

这很奇怪。无论如何，要检查的事情：

Z-index：围绕图像的外框可能位于图像本身的“上方”。将z-index添加到值为9999的图像中进行检查
位置：如果它是父容器，或者天知道还有什么奇怪的位置，它可能会影响子元素的位置，在这种情况下是图像出现。
禁用 JS - Javascript 可能会导致此处出现问题，请尝试禁用它进行检查。
另外，当您使用 chrome 开发工具时，从技术上讲，您是在图像上“悬停”。而你说它突然出现。所以我会看看你的 :hover 规则，因为它们适用于图像。许多网站会使用精灵技术，在正常状态下显示一张图像，然后在悬停时将背景转移到同一图像的不同部分。您的正常状态可能为空，然后悬停将 bkgd 位置移动到您想要的图像。

让我知道结果如何。

【讨论】：

【解决方案3】：

复制此问题的更多方案 1. 如果尚未打开，请关闭检查。 2.调整大小检查是否已打开。 3. 调整浏览器窗口大小。

【讨论】：

【解决方案4】：

为了跟进这个问题，Mary 的回答是正确的，但对于我们的情况，重要的是不要设置宽度和高度以保持响应能力。但是显然将 width 和 height 设置为 auto 效果也很好，尽管它在外观上没有任何区别。

【讨论】：

【解决方案5】：

因此，由于在某些情况下打开 Web Inspector 会调整页面大小，因此您应该查看：

对我来说，这是 Picture 元素在其媒体属性定义中存在差距 (<source media=(min-width: 1824px)">)。

【讨论】：