加载MVC表单上的图像，但在Chrome中不可见

Question

这是Azure App Service应用程序中托管的基本MVC视图。当我们加载表单时，某些图像会间歇性地不加载或部分加载（您只会看到一半的图像）。您可以在下面看到我的示例图片。

有时图像会完全丢失，有时会部分渲染。但是，一旦我刷新页面，或者什至只是调整窗口大小而没有任何刷新，图像就会完全显示。我签入了开发工具，它们都已完全加载，只是不显示（请参见下文）。因此，在调整窗口大小后，“网络”选项卡中的所有更改都没有改变，没有任何网络活动，但是图像突然间完全可见。如果我按CTRL + F5，则某些图像将不可见或部分可见，但有时会有所不同。

这仅在Chrome中发生。 Edge和Firefox没有此问题。我们已经在不同环境中的多台计算机上进行了尝试。

这是图像标签的外观，包括它所包含的div标签：

<div style="display: inline-flex; width: 200px; height: 200px; padding: 0px; vertical-align: middle; margin-top: auto; margin-bottom: auto;">
    <img border="0" src="https://mysite.blob.core.windows.net/productimages/a1aa1aa1-1aa1-11a1-1111-aa1111111aa1/STAR100.png" style="max-width: 200px; max-height: 200px; margin: auto; ">
    <br>
</div>

[我们尝试在图像链接的末尾添加一个唯一的标签，以强制其不进行缓存，我们不向页面添加缓存，我们尝试添加loading easy属性，但到目前为止没有任何效果。

Answer 1

我们弄清楚这是什么。在浏览一些实际存储图像以了解天蓝色的代码时，我们注意到它是将图像“硬编码”为.png文件。因此，用户正在发送.jpg文件的链接，这些链接已被拉出，然后以.png格式上传到azure blob。奇怪的是，直到最近的更新，这对于所有浏览器和chrome都可以正常工作。最新更新之后，我们开始遇到此问题。

因此，一旦我们下载了图像，将它们转换为真实的PNG文件，然后重新上传，问题就解决了。在我们这端，这是一个怪异的异常现象，直到最新的chrome更新将其暴露出来才真正被发现。