Icon added using `addImage` not rendering consistently.

@danswick is already working on this.

Since Jul 9, 2021.

**mapbox-gl-js version**: 1.7.0 (also reproduced in 1.3.1)

**browser**: Chrome Version 79.0.3945.130 (Official Build) (64-bit)

### Steps to Trigger Behavior

1. Use `map.addImage` to add a base64 encoded image.
2. Add a symbol layer that uses the image.
3. Observe the icon will only sometimes appear.

### Link to Demonstration

1. Open jsbin: https://jsbin.com/retaxub/edit?js,output
2. Observe either an icon of a ship in the center of the map or no such icon.
3. Reload or re-run the jsbin to observe the icon of a ship rendering only sometimes. I've seen it render consistently many times in a row and not render many times in a row. Lately, I've been seeing the icon render rarely, so it may take a bunch of tries to see the icon render. It's not clear what affects the chances.

### Expected Behavior
The icon consistently appears on the map.

### Actual Behavior
The icon only sometimes appears on the map.

### Some background on my use case
This may tie into the future plans mentioned here: https://github.com/mapbox/mapbox-gl-js/pull/9226#issuecomment-578098987

My use case is to be able to render X features per tile, where X can vary from 0 to no more than 50 features and a subset of those features use a unique custom icon.

The reason I'm using base64 encoded images is so I can return images along with a tile's features in lieu of a better solution that performs better than fetching images separately.