JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <tr>
    <td>
      <select id="mySelect">
                <option value="" img="">Select an Item!</option>
                <option value="1" img="http://www.dummyimage.com/100x50/3a52f2/fff.png">Item 1</option>
                <option value="2" img="http://www.dummyimage.com/200x50/00ff00/fff.png">Item 2</option>
                <option value="3" img="http://www.dummyimage.com/200x100/00cc99/fff.png">Item 3</option>
                <option value="4" img="http://www.dummyimage.com/100x200/FF5200/fff.png">Item 4</option>
            </select>
    </td>
    <td>
      <img id="myImage" src=""></img>
    </td>
  </tr>
</table>

JavaScript

// when the select changes...
$("#mySelect").change(function(event) {

  // gets the img attribute (custom attribute) of the selected option
  var image = $(this).find(":selected").attr("img");

  // configure the src attribute of the img tag to use the value of the select option img attribute
  $("#myImage").attr("src", image);
});