JSFiddle - React, Tailwind, and code Playground

Test Images

by MegaScience

HTML

<img id="avatarImage" data-file-name="HFPPBFFLOMEJOLGGGBADIFGOEIHMNKKPENGBEGFHBAHONMCFCKJDPDEBFCNFPPLGPCFKCOGPOJDPDCBMMNHKODLNIHHIJJGLOIABJEGKKBOKHAFFLDMNFLNFAAHLMKMDGEDFAILIJIAAMEENFIMKDAIOCJAGFHHMAPNJBOOGLKOPEEMFMABOIBFJODJLFOIGDBMKJMFOBGBPHLLDGJNODNFJDNJFLJFOEPNPBPHCDCFKBBLAAOILMLDFDKAPBBIG"/>

CSS

img {
  min-width: 20px;
  min-height: 20px;
  outline: 2px solid red;
}

JavaScript

const urlBase = 'http://msavatar1.nexon.net/Character/'
const avatarImage = document.getElementById('avatarImage')
avatarImage.src = urlBase + avatarImage.dataset.fileName + '.png'

const updateImage = (e) => {
	if(e.target.dataset.fileName.length < 2) {
		e.target.removeEventListener('click', updateImage)
		e.target.removeEventListener('error', updateImage)
  	return
  }
	e.target.dataset.fileName = e.target.dataset.fileName.slice(0, - 1)
	e.target.src = urlBase + e.target.dataset.fileName + '.png'
}
avatarImage.addEventListener('click', updateImage)
avatarImage.addEventListener('error', updateImage)
//avatarImage.onclick = updateImage
//avatarImage.onerror = updateImage
//http://msavatar1.nexon.net/Character/HFPPBFFLOMEJOLGGGBADIFGOEIHMNKKPENGBEGFHBAHONMCFCKJDPDEBFCNFPPLGPCFKCOGPOJDPDCBMMNHKODLNIHHIJJGLOIABJEGKKBOKHAFFLDMNFLNFAAHLMKMDGEDFAILIJIAAMEENFIMKDAIOCJAGFHHMAPNJBOOGLKOPEEMFMABOIBFJODJLFOIGDBMKJMFOBGBPHLLDGJNODNFJDNJFLJFOEPNPBPHCDCFKBBLAAOILMLDFDKAPBBIG.png