Array of image icons NOT loading very rarely sometimes

Question

I am just loading some app icons in a screen with the code given below. It works fine constantly, but sometimes very rarely (1/20 times) the icon alone not loading as given in the picture below but app names are displayed below the icons (Which I am not showing here). There is no trace of errors.

I presume if there is some error, at least the icon without image(box alone) gets loaded. But in my case, it's different Since the actual root cause or error is not traceable, I have no other way than to go for some retry logic here to reload the icons. How can I do them ? Please provide a better idea. Any sample code would be helpful.

  <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

Hm, it seems strange. Try to replace span with a div or just remove it entirely. Then add width/height attributes to your <img>.

Also you can set up a default image in case your code fails to fetch the desired one.

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;
 ｝
}

I know that doesn't explain what's happening now but I hope that would help to track the issue.