Dynamically rendering HTML img and putting onerror

Question

for (let i = 0; i < upper_player_arr.length; i++) {
    document.getElementById("upper-player-wrapper").innerHTML +=
        // structure A[0]: name, A[1]: _id
        `
        <div id="player-id-${upper_player_arr[i][1]}" class="similar-player-elem">
            <img class="small-img img-responsive" src="https://df11img.s3-us-west-1.amazonaws.com/${upper_player_arr[i][1]}.png" onerror="this.onerror=null;this.src='https://df11img.s3-us-west-1.amazonaws.com/default.png';">
            <div id="player-name" class="player-name-small">
                ${upper_player_arr[i][0]}
            </div>
        </div>
        `
}

In my HTML/JavaScript app, I am dynamically rendering HTML img. The image is based on the id of the object. I uploaded a bunch of images on AWS S3, but some of them do not have images. So, I tried to use onerror to put a default image for the image that does not exist.

However, this just gives me Failed to load resource: the server responded with a status of 403 (Forbidden)

Is there anything else that I need to set to make this work?