如何使用javascript中的request从网站/api获取图像并在html中使用img src
代码的目标是从数组中获取用户输入的国家/地区，即 Item[4]，将国家/地区附加到 url，然后使用请求从该 url 获取图像。我假设我需要使用 img src 在我的网站上显示图像。我做错了什么吗？我什么也没看到。另外，我正在尝试使用 javascript 来完成此任务。谢谢！API： https: //www.countryflags.io
personInfo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Person Information Page </title>
<style>
h2{
text-align: center;
}
label {
display: inline-block;
width: 150px;
text-align: left;
}
</style>
</head>
<body>
<p style="text-decoration: underline;"><a href=http://127.0.0.1:5000/> Back to home </a></p>
<h2 id="displayName" ></h2>
<div class="block">
<label>Born on: </label>
<p id="birthdate"></p>
</div>
<div class="block">
<label>Born in the country: </label>
<p id="country"></p>
</div>
<div class="block">
<label>Some facts about country: </label>
<img id="countryFlag" src = country_flag; />
</div>
</body>
</html>
慕婉清64621321回答
-
慕桂英3389331
试试这个：personInfo.html<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title> Person Information Page </title> <style> h2{ text-align: center; } label { display: inline-block; width: 150px; text-align: left; } </style></head><body><p style="text-decoration: underline;"><a href=http://127.0.0.1:5000/> Back to home </a></p><h2 id="displayName" ></h2><div class="block"> <label>Born on: </label> <p id="birthdate"></p></div><div class="block"> <label>Born in the country: </label> <p id="country"></p></div><div class="block"> <label>Some facts about country: </label> <img id="countryFlag" src = country_flag; /></div><script>var personInfoList = JSON.parse(sessionStorage.getItem("newList1")); for(let item of personInfoList) { document.getElementById("displayName").innerHTML = item[0] + " " + item[1]; document.getElementById("birthdate").innerHTML = item[2]; document.getElementById("country").innerHTML = item[3]; country_flag = `https://www.countryflags.io/${item[3]}/shiny/64.png`; document.getElementById("countryFlag").src = country_flag; }</script></body></html>添加名称.html<!DOCTYPE html><html><head><meta charset="UTF-8"><title> Add Name Page </title><style> body { text-align: center; } form { position:relative; top:20px; display: inline-block; } label { display: inline-block; width: 150px; text-align: left; } p { position: relative; top: -43px; left: 410px; }</style>{% extends "navigation.html" %}{% block content %} </head><body> <form action="home.html" > <div class="block"> <label>First name: </label> <input type='text' input name='firstname' id='firstname'> </div> <div class="block"> <label>Last name: </label> <input type='text' input name='lastname' id='lastname'> </div> <div class="block"> <label>Birthday: </label> <input type='text' input name='birthday' id='birthday' placeholder="mm/dd/yyyy"> </div> <div class="block"> <label>Country of Origin: </label> <input type='text' input name='countryOfOrigin' id='countryOfOrigin'> </div> <p> <input type="button" id="add" value="Submit" onclick= "passVal(); window.location.href = '/';"> </p> </form> <script> function passVal() { var prevValue = localStorage.getItem("newList1"); var newList = [] if(prevValue) { newList = JSON.parse(prevValue); } var newFirstName = document.getElementById("firstname").value; var newLastName = document.getElementById("lastname").value; var newBirthday = document.getElementById("birthday").value; var newCOO = document.getElementById("countryOfOrigin").value; newList.push([newFirstName, newLastName, newBirthday, newCOO]); sessionStorage.setItem("newList1", JSON.stringify(newList)); } </script></body>{% endblock %}在 add_name.html 中，我更改了“var newList;” 到“var newList = []”。在 personInfo.html 中，不需要获取图像，只需将图像路径分配给 src 即可。
随时随地看视频慕课网APP
相关分类
Html5