JSFiddle - React, Tailwind, and code Playground

HTML

<input id="title" value="new-filename-for-image">
<input id="imgurl" value="">
<br>
<span class="ext"></span>
<br>


<img id="theimg" src="http://i.imgur.com/Uqotu.jpg">

CSS

body {margin:10px;}
input {padding:4px;width:200px;}
img {width:400px;height:300px}

JavaScript

$(document).ready(function(){
    
    imgSrc = $('img#theimg').attr('src');
    imgExt = imgSrc.substr(imgSrc.length - 3);
    
    $('input#imgurl').val(imgSrc);
    $('.ext').append(imgExt)
})