图像图标数组有时很少加载

Question

我只是使用下面给出的代码在屏幕上加载一些应用程序图标。它始终工作正常，但有时很少（1/20 次）图标单独未加载，如下图所示，但应用程序名称显示在图标下方（我未在此处显示）。没有任何错误的痕迹。

我认为如果有一些错误，至少会加载没有图像的图标（单独的框）。但就我而言，情况有所不同，因为实际的根本原因或错误是不可追踪的，所以我没有其他办法，只能在这里使用一些重试逻辑来重新加载图标。我该怎么做？请提供更好的想法。任何示例代码都会有帮助。

  <div class="apps__list" v-for="app in AppData.appList" v-bind:key="app.app_name">
      <span>
          <img id="app_icons" v-bind:src="AppData.getAppIcon(app)" />
       </span>
       <div class="text">
          <span class="text text--ellipsis">{{ app.app_name }}</span>
       </div>
 </div>

 getAppIcon(app) {
  let image="";
  let assetsURL = "/images/xhdpi_2x/";
  return image = assetsURL +"/" + app.icon_name + ".png";
 }

Answer 1

嗯，看起来很奇怪。尝试将

span

替换为

div

或将其完全删除。然后将

width

/

height

添加到您的图像中。

您还可以设置默认图像，以防您的代码无法获取所需的图像。

img {
 display: block; 
 width: 49px; 
 height: 49px;
 border: 1px solid black; 
 position: relative; 
 overflow: hidden;

 &:: before {
  content: attr(alt);
  position: absolute;
  top: 0; 
  left: 0;
  background-image: url('../path-to-the-default-image.jpg'); 
  width: 100%; 
  height: 100%;
  overflow: hidden; 
  white-space: nowrap;
  text-overflow: ellipsis;
 ｝
}

我知道这并不能解释现在发生的事情，但我希望这将有助于跟踪问题。