javascript Image（）在下载时触发​​错误，不清楚原因

Question

我将Quasar与以下代码一起使用：

<template>
  <div class="q-pa-md">
    <div class="q-gutter-sm row items-start">
      <q-img
        v-for="pic in picObject"
        :key="pic.id"
        :src="pic"
        @error="reportError"
        style="height: 140px; width: 140px"
      >
        <template v-slot:default>
          <div class="absolute-bottom transparant-banner">This picture loaded ok.</div>
        </template>
        <template v-slot:error>
          <div class="absolute-full flex flex-center bg-dark" style="color: red">Cannot load image</div>
        </template>
      </q-img>
    </div>
  </div>
</template>
<script>

export default {
  components: {},
  data() {
    return {
      picObject: {  "2": "https://images.takeshape.io/86ce9525-f5f2-4e97-81ba-54e8ce933da7/dev/144069dc-7390-4022-aa0f-abba022d3a2f/spec.jpg?auto=compress%2Cformat", "3": "https://natureconservancy-h.assetsadobe.com/is/image/content/dam/tnc/nature/en/photos/prescribed_burn_oregon.jpg?crop=0,120,5760,3600&wid=1640&hei=1025&scl=3.5121951219512195", "4": "https://orig11.deviantart.net/1062/f/2015/315/9/6/abstract__7_by_thejsyve1-d9gciwk.jpg", "5": "https://natureconservancy-h.assetsadobe.com/is/image/content/dam/tnc/nature/en/photos/Brown_County_Hills_Leonetti.jpg?crop=33,0,1192,656&wid=4000&hei=2200&scl=0.29818181818181816", "6": "https://www.telegraph.co.uk/content/dam/Travel/galleries/travel/destinations/northamerica/usa/US%20national%20parks/AP84847745_Yosemite_General-xlarge.jpg", "7": "http://miriadna.com/desctopwalls/images/max/Papaverous-path.jpg", "8": "https://dehayf5mhw1h7.cloudfront.net/wp-content/uploads/sites/183/2016/09/15173325/Brown_County_Indiana_Estados_Unidos_2012-10-14_DD_10.jpg", "9": "https://s-media-cache-ak0.pinimg.com/originals/19/e9/58/19e9581dbdc756a2dbbb38ae39a3419c.jpg", "12": "https://cdn.pixabay.com/photo/2015/12/01/20/28/green-1072828_960_720.jpg","13": "https://www.alwareness.org/wp-content/uploads/2018/10/Bomen-Bos.jpg", "13": "https://www.campz.be/info/wp-content/uploads/header-pic-mountain.jpeg", "14": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSUzRyiSPfzeIogLgkY1P8ugrvzls23SMhOcJi7vmUfCe4r1nKa", "14": "https://upload.wikimedia.org/wikipedia/commons/f/ff/Pizigani_1367_Chart_10MB.jpg", "15": "https://farm6.staticflickr.com/5720/22076039308_4e2fc21c5f_o.jpg" }
    };
  },
  methods: {
    reportError(event) {
      console.log(`${event.name}: ${event.message}`);
    }
  }
};
</script>
<style>
.transparant-banner {
  color: white;
}
</style>

在Chrome浏览器上，我在一些图像上出错。参见：

在Firefox上，一切正常。类relies在javascript q-img上的image()组件中，其onerror显然已被触发。

我的问题：

1. 为什么会触发错误，因为它们看起来像是随机的并且自图像 是否显示它已成功下载（错误发生后）？
2. 我该如何解决？

This jsfiddle在components/Example.vue中显示了行为和相关代码。

编辑： 错误消息为：EncodingError - The source image cannot be decoded.

Apparently .decode() causes the error。但是到底是什么原因呢？ 该article描述了.decode()，实际上仅适用于Chrome。在类星体中，解码由here处理。

Answer 1

Image.decode是异步浏览器api，应该避免在解码和绘画时阻塞主线程的情况。

使用src初始化这些图像会发生什么？浏览器开始下载它们。解码使您有一个承诺，知道何时可以将其安全地插入DOM。

但是，当您顺序处理一些大图像时（例如在示例中，每个图像大约为4mb），有时会损坏图像。不知道为什么，但是大小和数量很重要。

我已经用简单的代码处理了您的图片数组，例如

imagesArray.forEach(function(img) {
  var i = new Image();
  i.src = img;
  i.decode().then(function() {
    console.log("decoded");
  }).catch(function() {
    console.log("error");
  });
});

使用5-6张以上的图片容易出错。我建议尝试使用静态图片（图片内容类型）。

无论如何，Quazar使用this.__updateSrc();来将src值传递给backgroundImage。这就是为什么即使在错误情况下也要加载背景的原因。它使浏览器两次下载这些图像！在错误情况下，不使用通过解码的图像的第一次下载。

如果要减少此错误，请在__onError中用this.hasError = true注释掉该行。当此属性为true时，将触发Vue对模板插槽抛出错误。

顺便说一句，在Quasar的v1.0.0-rc.1版本中，此问题为solved，即它将下载而没有错误状态。

Answer 2

您会注意到，使用DevTools网络时，已经下载了vue下载的图像（以后一批），一次下载的图像不超过6个。同时打开的连接的HTTP常识限制为2。您还将注意到，类星体加载的图像不遵循此规则：它们都是并行下载的（12）。在Firefox中，它们一次都被强制限制为2个。我假设发生的事情（如果您注意到的话，唯一的证明就是下载的图像具有不同的字节大小）是远程服务器在运行中重置大量并行类星体连接（因为标头仍然为200）