HTML 图像在 iOS（Safari、Chrome）中不显示

Question

我的 Angular 应用程序中有一张图像：

<img src="./logo.png">

。

图像在 Windows Chrome 和 Android 设备上正确显示。但是，在 iOS 设备（Mac、iPhone、iPad）上，不会显示图像，而是显示损坏的图像图标。

当我在 iOS 上的 Chrome 中直接输入图像 URL 时，图像会正确加载。此后，如果我导航回主应用程序 URL，图像将在 Chrome 中正确显示。但是，此解决方法在 iOS 上的 Safari 中不起作用。

我尝试在应用程序的index.html 文件中预加载图像，但这并没有解决问题。任何帮助将不胜感激。

我确实尝试了

<link rel="preload" ... as="image">

，没有任何不同的结果。

Answer 1

可能有多种原因，最有可能是一些安全原因，也许是错误的 mime 类型、来源或 img 或其来源的其他元数据。 无论如何，因为在其他浏览器中它可以工作，这意味着图像本身是可下载的，您可以尝试将图像转换为 base64，然后使用该值作为图像 src。

它可以是这样的：

async function convertImageToBase64(imageUrl: string): Promise<string> {
  const response = await fetch(imageUrl);
  const blob = await response.blob();

  return new Promise(resolve => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result as string);
    reader.onerror = reject;
    reader.readAsDataURL(blob);
  });
}

const base64ImageSrc = await convertImageToBase64('https://example.com/image.jpg')