根据ID使用javascript更改html网页上的图像

我对JavaScript相当陌生，我正在尝试显示一个图像，该图像根据用户键入的ID而变化

下面，我声明了一个变量“icon”，用于存储url+图标id+.png的值，以完成url：

icon = "http://ddragon.leagueoflegends.com/cdn/6.2.1/img/profileicon/" + summonerIcon + ".png"

此变量可能包含的内容示例如下：

“http://ddragon.leagueoflegends.com/cdn/6.2.1/img/profileicon/14.png“

我想使用这个变量中的信息显示在我的html页面上，因此当用户键入用户名时，javascript应该返回一个与用户提交的ID匹配的图像

这些图像都存储在上面显示的url上，而不是本地存储

---

感谢阅读我的问题。

使用jQuery钩住输入上的更改事件，该事件将指示ID，然后将值拉入icon变量

HTML

您必须调整getVals函数，使其重新渲染您正在显示的图像，但这将为您指明正确的方向。

这使用了插件

$（函数（）{
$（'#btnLoad'）。单击（函数（e）{
var baseUrl=http://ddragon.leagueoflegends.com/cdn/6.2.1/img/profileicon/';
$（'iconHolder'）.attr（'src'，baseUrl++$（'iconId'）.val（）+'.png'）；
});
});
图标Id加载

你身上有什么，HTML？你也能贴出来吗？这会给你提示。。。那么图像与页面不在同一个域中？这不是一个好主意，也许你应该下载并在本地存储这些图像。如果CC允许您这样做并使用这些资产。

<input type="text" name="userid" id="id />

function getVals() {
  var icon = $( "#id" ).val();
}

$( "input" ).change( getVals );
getVals();

<script type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('#btnLoad').click(function(e){
            var baseUrl ='http://ddragon.leagueoflegends.com/cdn/6.2.1/img/profileicon/';
            $('#iconHolder').attr('src', baseUrl + $('#iconId').val() + '.png');
        });
    });
</script>
Icon Id <input id="iconId" /><button id="btnLoad">Load</button>
<br/>
<img id="iconHolder" />